geekflyer / gulp-ui5-preload Goto Github PK

Create a Component-preload.js file for openui5 / sapui5 projects

JavaScript 100.00%

gulp-ui5-preload's Introduction

NOTE: This project is looking for Maintainers. See this Issue

gulp-ui5-preload

Creates a Component-preload.js or library-preload.json file for openui5 / sapui5 projects. Creating a preload file can speed up the initial load time of your webapp, by reducing the number of HTTP requests / roundtrips to load your code. The preload file can combine your js artifacts, xml, html and json views as well as .properties files into a single Component-preload.js / library-preload.json file.

Install

$ npm install --save-dev gulp-ui5-preload

Usage

Simple example.

var ui5preload = require('gulp-ui5-preload');

gulp.task('ui5preload', function(){
  return gulp.src([
					'src/ui/**/**.+(js|xml)',
					'!src/ui/thirdparty/**' //exclude files that don't belong in preload (optional)
                  ])
          .pipe(ui5preload({base:'src/ui',namespace:'my.project.ui'}))
          .pipe(gulp.dest('dist'));
     })

Example with uglify / minify js and xml.

// npm install --save-dev gulp-ui5-preload gulp-uglify gulp-pretty-data gulp-if
var ui5preload = require('gulp-ui5-preload');
var uglify = require('gulp-uglify');
var prettydata = require('gulp-pretty-data');
var gulpif = require('gulp-if');

gulp.task('ui5preload', function(){
  return gulp.src([
					'src/ui/**/**.+(js|xml)',
					'!src/ui/thirdparty/**'
                  ])
          .pipe(gulpif('**/*.js',uglify()))    //only pass .js files to uglify
          .pipe(gulpif('**/*.xml',prettydata({type:'minify'}))) // only pass .xml to prettydata 
          .pipe(ui5preload({base:'src/ui',namespace:'my.project.ui'}))
          .pipe(gulp.dest('dist'));
     })

API

ui5Preload(options) -> vinyl through-stream

Accepts an options object. Returns a vinyl through-stream which collects all .xml and .js files and emits a single vinyl file (Component-preload.js / library-preload.json) which is passed downstream.

options

base

required
Type: string

The base / entry path of your app. Usually the same location where your index.html and the Component.js resides. Can also be just './' to point to the root of your project.

namespace

Type: string
Default: ''
Example: my.company.app

The namespace at the base path. All source files are treated as sub-namespaces of this namespace, relative to the base path.

fileName

Type: string
Default: 'Component-preload.js' or 'library-preload.json' (depends on isLibrary option)

File name of the combined file to emit.

isLibrary

Type: boolean
Default: false

If set to true a library-preload.json file is emitted instead of a Component-preload.js file (default). The emitted file contents between those options vary a little bit.

License

Apache 2.0 © Christian Theilemann

gulp-ui5-preload's People

Contributors

Stargazers

Watchers

Forkers

themasch sunbox will279 felipetaiarol cschuff bendkt ui5experts sergiykh jomaguma

gulp-ui5-preload's Issues

Looking for Maintainers

Hi,

I'm not working anymore with UI5 and hence would looking for someone to take over maintenance and ownership of this repo.

Please comment below if you are interested.

Generate library-preload.js

I think it could be a good thing to generate a library-preload.js like in grunt-openui5 SAP-archive/grunt-openui5#47

New preload format for ui5 1.54+

Since UI5 version 1.54 and higher a new preload format is used.

The grunt guys already implemented this in their latest release:
SAP-archive/grunt-openui5@6fac9ff

Please also add the setting compatVersion in this gulp plugin.

String '$&' messed up by gulp-ui5-preload

Hi,

first of all: thanks for this great tool. I'm using it a lot.

I discovered a little and quite tricky quirk. For a library-preload.json gulp-ui5-preload minifies
"\\$&" to \"\\\\JSON_CONTENT\"

I tracked this down to index.js:79
var contents = template.replace('JSON_CONTENT', jsonContent);

Problem is this:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Specifying_a_string_as_a_parameter

Pull Request with fix will follow.

BR
Chris

create library-preload.json for libraries

Are there plans to support libraries and preload files for these?
The differences in both files are really small, basically its the name (library-preload.json instead of Component-preload.js) and the "jQuery.sap.registerPreloadedModules( )" wrapping is left out (since its a json file).

You could just add another option "isLibrary" that triggers this (for example).

File timestamp of generated preload file is wrong

Since the target preload file is created with

var preloadFile = firstFile.clone({contents: false});

all file attributes including creation and modification timestamps are cloned from the firstFile which is the first file coming out of the stream.

This leads to subsequent problems when creating e.g. a sap-ui-cachebuster-info.json file.
When the firstFile has not been changed for a long time the Component-preload.js will be listed in the cachebuster file with the old timestamp of the firstFile which will lead to clients loading the outdated version of Component-preload.js from the browser cache despite a newer version being available on the server.

Since this repo is not maintained anymore I just want to report this for any others who might face this problem in the future.

I will try to find a workaround by manually setting the modification date of Component-preload.js after it has been created in my gulp build script.