bdlr

Create and use bundles like you would do in .NET.

How to use?

Install

npm install --save bdlr

Example

index.js

var bdlr = require('bdlr');

bdlr.createBundle('css', bdlr.STYLE)
  .includeBowerComponents()
  .includeGlob('src/**/*.css');
bdlr.createBundle('lib', bdlr.SCRIPT)
  .includeBowerComponents(true, ['angular-mocks'])
  .rebase({'bower_components': 'assets'});
bdlr.createBundle('app', bdlr.SCRIPT)
  .includeFile('src/app.js')
  .includeGlob('src/**/*.js', ['src/**/*.exclude.js'])
  .includeFile('src/main.js');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.get('/', function (_, res) {
  res.render('mypage', { bundles: bdlr.bundles });
});

app.use('/bower_components', express.static('bower_components'));

mypage.jade

doctype html
html
  head
    title My Page
    | !{bundles.css}
  body
    block content
    | !{bundles.lib}
    | !{bundles.app}

API

Bdlr

• bundles:Object: collection of registred bundles
• createBundle(name:string, type:bdlr.SCRIPT|bdlr.STYLE, renderedUrl:string):Bundle: renderedUrl is what is rendered in production
• ENV:string: current environnement, default is process.env.NODE_ENV. Can be set but only prod[uction] change the Bundle behaviors.

Bundle

• constructor(type:Bundle.SCRIPT|Bundle.STYLE[, renderedUrl:string])
• type:number: type of bundle (script or style), type param of the constructor
• url:string: renderedUrl param of the constructor
• files:string[]: final list of files in the bundle
• includeFile(filePath:string):Bundle
• includeGlob(glob:string, ignoredGlobs:string[]):Bundle
• includeBowerComponents([includeDevComponents:boolean, [ignoredPackages:string[]]]):Bundle: add your bower components in the bundle, including the dev components if arguments is true
• toString():string: get html tags of the bundle. if bdlr.ENV is prod, renderedUrl will be the url
• rebase(rebaseConf:object):Bundle: when bdlr.ENV is dev, allows you to rebase directories
• getMinifiedContent():string: get the minified content of the bundle

Serve production bundles files with Express

:warning: You should consider a file cache to increase performances.

// ...
var app = express();
var bdlr = require('bdlr');

var includeBowerDevDependencies = true;
bdlr.createBundle('style', bdlr.STYLE, '/style.css')
  .includeBowerComponents(includeBowerDevDependencies)
  .includeGlob('src/**/*.css');
  
bdlr.createBundle('lib', bdlr.SCRIPT, '/lib.js')
  .includeBowerComponents(includeBowerDevDependencies, ['angular-mocks']);
  
bdlr.createBundle('app', bdlr.SCRIPT, '/app.js')
  .includeFile('src/app.js')
  .includeGlob('src/**/*.js', ['src/**/*.exclude.js'])
  .includeFile('src/main.js');
bdlr.ENV = 'production';

//...

Object.keys(bdlr.bundles).forEach((bundleName) => {
  var bundle = bdlr.bundles[bundleName];
  app.get(bundle.url, (req, res) => {
    res.set('Content-Type', bundle.type === bdlr.SCRIPT ? 'application/javascript' : 'text/css');
    res.send(bundle.getMinifiedContent());
  });
});

Note

The included files depends on environment of bdlr. You can pass .js, .debug.js or .min.js, the result will be the same :

• in development: bdlr will search for .debug.js files, if not present, search for .js and if not present, take .min.js
• in production: bdlr will search for .min.js files, if not present, search for .js and if not present, take .debug.js

Example

Considering yourFile.debug.js, yourFile.js and yourFile.min.js and a bundle with .includeFile('yourFile.js') or .includeGlob('*.js').

• in development, yourFile.debug.js will be taken
• in production, yourFile.min.js will be taken

Dev note

To run the tests, simply install mocha globally and run:

mocha