How to create component-preload.js in easy steps

I had issues creating component-preload.js file for my SAPUI5 application project. I am not describing what component-preload.js file is as there are already many post for that. I would keep this to on “How to create component-preload.js File” in some easy steps. The following steps were done on a windows machine.

1. First you need to install the Node.js on your system. Download the exe file and run it like any other software installation.

2. Now install gulp with the following command on the command prompt. This can be done on the project workspace folder ( webcontent ) also.

    npm install –save gulp-install

      More details can be found here gulp-install

3. Once you have gulp installed, you need to install the following gulp plugins. Enter the following commands at the command prompt.

    npm install –save-dev gulp-ui5-preload

    npm install –save-dev gulp-uglify

  npm install –save-dev gulp-if

4. Create a new file gulpfile.js in the same folder where the component.js file resides ( webcontent ) – check attachments

5. Now replace the “yournamespace” in the gulpfile.js with your project name.

6. Run the following command in the command promp to generate the component-preload.js file. This should be in the folder where you have the component.js file.

    gulp ui5preload

      After successful execution of the command you can the following

   If you get any error at this command try all the previous steps here in the same folder.

Share your file using eclipse tool with the ABAP system.