lightweb-builder
Lightweight compiler for web-based applications
Installation
npm install --save-dev lightweb-builder
Usage
Simple examples:
var builder = default; gulp;
Precompile
Compilers installation
For use compilers please add one of this dependencies in your package.json
:
"gulp-babel": "6.1.*" // ES6 & ES7 core "babel-preset-es2015": "6.6.*" // ES6 support (gulp-babel required) "babel-preset-stage-0": "6.5.*" // ES7 support (gulp-babel required) "gulp-coffee": "2.3.*" // CoffeeScript support "gulp-sass": "2.2.*" // Scss & Sass support "gulp-less": "3.0.*" // Less support "gulp-stylus": "2.3.*" // Stylus support "gulp-typescript": "2.12.*" // TypeScript support
Compilers usage
var builder = default; gulp;
Available compilers:
.babel([options])
- Babel compiler.es6([options])
- EcmaScript 2015 compiler (Babel with es2015 preset).es7([options])
- EcmaScript 2016 compiler (Babel with es2015 & stage-0 presets).coffee([options])
- CoffeeScript compiler.js([options])
- JavaScript compiler.ts([options])
- TypeScript compiler.sass([options])
- Sass compiler.scss([options])
- Scss compiler.less([options])
- Less compiler.stylus([options])
- Stylus compiler.css([options])
- Css compiler
options
can be type of String, Array of strings or callback Function. Like:
(new builder)
.css(function(compiler) {
compiler.file('css/layout.css').file('css/dependency.css');
})
// Alias for
(new builder)
.css('css/layout.css')
.css('css/dependency.css')
// Or
(new builder)
.css(['css/layout.css', 'css/dependency.css'])
Additional compiler options
Root builder options
// [JS Only] Add ES6 browser polyfill // [JS Only] Add CommonJS library for `require` function support // [CSS & JS] Add SourceMaps // [CSS & JS] Minify output sources // [CSS & JS] Add gzip file //... //.build('out/file.ext')
CssCompiler options (css, sass, less, scss, stylus, etc)
;
JsCompiler options (js, es6, es7, coffee, etc)
; // Example ; // In your browser: `var Application = require('App/Application');`
Compilation order
All files will be compiled in parallel, like this:
; /* | Compilation order | - random order | | some.js ---> | | | any.js ---> | | ----> output.js | some2.js --> | | | any2.js --->*/
But you can set order of compilation with .then
keyword:
then ; /* | Compilation order: | - any.js then any2.js and some.js + some2.js with random order | | any.js -> any2.js -> | | ----> output.js | some.js -----------> | | | some2.js ---------->*/