Create Component-preload.js using Gulp

Before I begin with the topic I would like to give a brief introduction about Gulp.

Gulp.js is a open source JavaScript Task Runner. You can easily automate task like

minification, compilation, unit testing, linting, etc

Use the -g options to install Gulp globally on your machine.

npm install -g gulp

Component-preload.js is a step taken by SAP Fiori to improve performance.

This file is automatically called by the framework on the time of loading.

The below given code is used by me in a project to construct Component-preload.js .

// Include gulp

var gulp = require(‘gulp’);

// Include Our Plugins

var jshint = require(‘gulp-jshint’);

var concat = require(‘gulp-concat’);

var rename = require(‘gulp-rename’);

var uglify = require(‘gulp-uglify’);

var minifyHTML = require(‘gulp-minify-html’);

var tap = require(‘gulp-tap’);

var writeFile = require(‘writefile’);

var path = require(‘path’);

  var sMyAppName = “testapp”;

  var sFilename = ‘Component-preload’;

  var fPath;

  var sFileTmp;

  var sFileNameQ;

console.log(sMyAppName);

   var oComp = {

   name: sMyAppName  + “/” + sFilename , //testapp.component-preload

   version: “2.0”,

   modules:{}

}

gulp.task(‘scripts’, function() {

  return gulp.src([‘testapp/WebContent/*.js’,’testapp/WebContent/view/*.js’])

  .pipe(uglify())

  .pipe(tap(function(file) {

            fPath =  sMyAppName + ‘/’ + path.basename(file.path);

            oComp.modules[fPath] = file.contents.toString();

  }));

  });

gulp.task(‘scripts_1’, function() {

  return gulp.src([‘testapp/WebContent/view/*.xml’])

  .pipe(minifyHTML({comments:true}))

  .pipe(tap(function(file) {

            fPath =  sMyAppName + ‘/’ + path.basename(file.path);

            oComp.modules[fPath] = file.contents.toString();

  }));

  });

  console.log(oComp);

  setTimeout(function(){

  sFileTmp = ‘jQuery.sap.registerPreloadedModules(‘ + JSON.stringify(oComp) + ‘)’;

  sFileNameQ = sFilename + ‘.js’;    //Component-preload.js

     writeFile( sFileNameQ , sFileTmp, function(err) {

                if (err) throw err;

                console.log(‘It\’s saved!’);

            });

  },1000);

  gulp.task(‘default’, [‘scripts’,’scripts_1′]);

I am also looking into another ways to optimize Fiori Performance.

Please let me know of you guys have some suggestions.