Giter Site home page Giter Site logo

gulp-ui5-preload's Introduction

gulp-ui5-preload Build Status npm version

Creates a Component-preload.js or library-preload.json file for openui5 / sapui5 projects. Creating a prelaod 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,js, 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

themasch avatar

Watchers

Benedikt Schölch avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.