How to create Component-preload.js files for Fiori Applications

1          Creating Component-preload.js file

1.1      Use of Component-preload.js:

Component-preload.js is a minified, obfuscated and uglified file that gathers all the sources of an application to minimize server requests and drastically reduce the application size. Once the development of an application is finished, the resources should be compressed into that file and deployed on the server.

 Creating the file:

The steps required to create the file could be found on http://scn.sap.com/community/mobile/blog/2014/12/10/building-fiori-like-app-in-component-preloadjs. Below is a summary of the steps, plus an additional step which I found necessary to make things work.

1-    Download and install Node.js  http://nodejs.org/download/. Once the installation is complete you can check it by running the following command in the command prompt: npm –v

2-    In the Node.js Command Prompt, type the following command: npm install –g gulp. This will install gulp and make it a command prompt command

3-     Download the files gulpcmd.bat and gulpfile.js from github - https://github.com/sjsaha/Fiori-Reusables and copy the files in WebContent folder.

4-     Modify the 'gulpfile.js' to suit your project name and structure. At minimum, please modify your application name

5-    Review the gulpcmd.bat file. If your computer is behind a corporate network proxy you might need to delete the REM from the following lines and change to the proxy servers IP or domain name.

6-     Execute the gulpcmd.bat file by double clicking or open the command prompt at WeConetent folder. This script should work in a verbose mode and if there is no error, will silently create a Component-preload.js file in the WebContent folder.