Skip to Content
Author's profile photo Former Member

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;


   var oComp = {

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

   version: “2.0”,



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

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


  .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(tap(function(file) {

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

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






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

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

     writeFile( sFileNameQ , sFileTmp, function(err) {

                if (err) throw err;

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



  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.

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo John Patterson
      John Patterson

      Hi Ritesh

      As i mentioned in Re: Inline XMLViews into component-preload.js please create a GIST or Github project for this code, so others can use / improve