node package manager

lightweb-builder

lightweb-builder

Lightweight compiler for web-based applications

Installation

npm install --save-dev lightweb-builder

Usage

Simple examples:

var builder = require('lightweb-builder').default;
 
gulp.task('default', function() {
    (new builder)
        .js(function(compiler) {
            compiler
                .path('src/path/')
                .file('src/vendor/jquery.js');
        })
        .build('./public/path/filename.js');
        
    (new builder)
        .css('src/source.css') // Shortcut for compiler.file('src/source.css'); 
        .build('./public/path/filename.css');
});

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 = require('lightweb-builder').default;
 
gulp.task('default', function() {
    (new builder)
        .es7(function(compiler) {
            compiler
                .file('src/filename.js')
                .path('src/vendor/')
                .path('src/path/');
        })
        .build('./public/path/filename.js');
});

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

    (new builder)
        .withPolyfill()   // [JS Only] Add ES6 browser polyfill 
        .withCommonJs()   // [JS Only] Add CommonJS library for `require` function support 
        .withSourceMaps() // [CSS & JS] Add SourceMaps 
        .withMinify()     // [CSS & JS] Minify output sources 
        .withGzip()       // [CSS & JS] Add gzip file 
        
        //... 
        //.build('out/file.ext') 

CssCompiler options (css, sass, less, scss, stylus, etc)

    .css(function(compiler) {
        compiler
            .autoPrefix([enabled = true][, options = {}]) 
            // Add autoprefix support 
            // See: https://github.com/postcss/autoprefixer 
    });

JsCompiler options (js, es6, es7, coffee, etc)

    .js(function(compiler) {
        compiler
            .namespace('PackageName');
            // Add CommonJs wrapping for all files in compiler scope 
            // With prefix `PackageName` 
    });
    
    
    // Example 
    .withCommonJs()
    .js(function(compiler) {
        compiler
            .namespace('App')
            .file('src/Application.js');
    });
    // In your browser: `var Application = require('App/Application');` 

Compilation order

All files will be compiled in parallel, like this:

(new builder)
    .js('src/some.js')
    .js('src/any.js')
    .js('src/some2.js')
    .js('src/any2.js')
    .build('output.js');
    
/*
 | Compilation order 
 |  - random order
 |
 | some.js --->
 |             |    
 | any.js  --->
 |             | ----> output.js
 | some2.js -->
 |             |
 | any2.js --->
*/

But you can set order of compilation with .then keyword:

(new builder)
    .js('src/some.js')
    .js('src/some2.js')
    .js('src/any.js')
    .then.js('src/any2.js')
    .build('output.js');
    
/*
 | 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 ---------->
*/