Rebuilding store code

We can rebuild the store code, such as JavaScript and CSS files, by using Grunt plugins.


Task info

For optimal store performance, all JavaScript and CSS files are kept to a minimum inside the store and widget directories. As a result, complete this task every time you update the store code, so that the store can apply our changes.


Procedure

  1. Set up the environment to rebuild store code.

    1. Go to the following directory on your development environment.

      WCDE_installdir\sample\stores\BuildScript\

      Note: This package is only available in WebSphere Commerce Developer version 9.0.0.5+.

    2. Extract the contents of the recompileTool.zip package to the WCDE_installdir/workspace/crs-web/WebContent directory.

    3. Download and install node.js and npm tooling:

      1. Download and install node.js and npm from nodejs.org.

      2. Ensure that the path environment variables are added after install, so that all commands work correctly from any directory on the command line.

    4. Run the following commands in sequence:

        root_dir>
        npm install -g bower
        WCDE_installdir\workspace\crs-web\WebContent\recompileTool\vendorWidgets>
        bower install
        WCDE_installdir\workspace\crs-web\WebContent\recompileTool\vendorWidgets>
        npm install
        WCDE_installdir\workspace\crs-web\WebContent\recompileTool\allInOne>
        npm install

      Ensure that each command runs successfully. Then, the environment is set up to rebuild store.

      Note: Bower might return a deprecated message. This can safely be ignored.

  2. Rebuild the store's code.

    1. Run the following commands in sequence: For development environments, use the grunt dev command, which only merges the code to make it easier for you to debug:

        WCDE_installdir\workspace\crs-web\WebContent\recompileTool\vendorWidgets>
        grunt dev -storename=your_store_name
        WCDE_installdir\workspace\crs-web\WebContent\recompileTool\allInOne>
        grunt dev -storename=your_store_name

      For production environments, use the grunt prod command, which uglifies and merges the code to increase load efficiency:

        WCDE_installdir\workspace\crs-web\WebContent\recompileTool\vendorWidgets>
        grunt prod -storename=your_store_name
        WCDE_installdir\workspace\crs-web\WebContent\recompileTool\allInOne>
        grunt prod -storename=your_store_name

      Where your_store_name is the store name. For example, AuroraB2BStorefrontAssetStore.

      Ensure that each command runs successfully. Then, the store code has been recompiled.