resource-bundler

A simple asset bundler for express styled loosely after the .net mvc bundler.

Easily allows adding files or folders to script or style bundles. By default, asset content is only combined. Transformations can be easily added to compress, uglify, compile .less etc.

Examples

Include bundler in your project:

var bundler = require('resource-bundler');

Create a bundle:

var styleBundle = bundler.addStyleBundle('myStyles');
var scriptBundle = bundler.addScriptBundle('myScripts');

Add a file to your bundle:

styleBundle.addFile("./public/stylesheets/site.css");

Add all files in a folder. 2nd parameter specifies whether to include subfolders (default is false). 3rd param is an optional filter:

styleBundle.addFolder("./public/stylesheets", true, /\.css$/);

---

###Transformations

By default the bundler just concatenates all the files together. In order to minify, or compile less or CoffeeScript or whatever, you will need to add transformers. Transformers are just functions conforming to the following signature and pattern:

function(fileContent, filePath){
    //return transformedContent;
}

You can also add asynchronous functions as transformers. They take a callback as a third parameter:

function(fileContent, filePath, callback){
    //callback(transformedContent)
}

Transformers are added using

myBundle.addTransformer(t)
//or
myBundle.addAsyncTransformer(asyncT)

---

Everything can be chained together as well.

bundler.addScriptBundle('myScripts')
    .addFile("./public/site.js")
    .addFolder("./public/scripts", true, /\.js$/)
    .addTransformer(minifier)
    .addAsyncTransformer(obfuscater);

Here are a couple of fairly realistic examples. The style bundle combines, transforms and compresses less files. The script bundle is using UglifyJs to minifiy JavaScript unless the file has ".min." in the name.

var bundler = require('resource-bundler');
var staticsFolder = path.join(__dirname, 'public');
var path = require('path');
var less = require('less');
var uglifyJs = require("uglify-js");

bundler.addStyleBundle('site')
    .addFile(path.join(staticsFolder, 'stylesheets/bootstrap/bootstrap.less'))
    .addFile(path.join(staticsFolder, 'stylesheets/style.less'))
    .addAsyncTransformer(function (content, filePath, callback) {
        less.render(content, {
            paths: ['.', path.dirname(filePath), './stylesheets/bootstrap/'],
            compress: true,
            filename: filePath
        }, function (e, css) {
            callback(css || JSON.stringify(e));
        });

    }).compile();

bundler.addScriptBundle('site')
    .addFolder(path.join(staticsFolder, 'javascripts', 'jquery'))
    .addFolder(path.join(staticsFolder, 'javascripts', 'bootstrap'))
    .addFolder(path.join(staticsFolder, 'javascripts'))
    .addTransformer(function (content, filePath) {
        if (filePath.toLowerCase().indexOf(".min.") > -1) return content;
        return uglifyJs.minify(content, {fromString: true}).code;
    }).compile();

###Compiling The bundler will automatically compile your bundles as needed. It will also watch your source files for changes and re-compile. In the above example, compile is called on each bundle after it is configured. This will ensure that the transformed and bundled output is ready to go for the first request.

---

###Referencing your bundles You can add the appropriate script and link tags to your views by using the bundler.middleware:

//You will want to add this before adding the router middleware.
app.use(bundler.middleware);

This will expose two methods, renderScript(bundleName) and renderStyles(bundleName) to your views. Here is an example in a Jade template:

doctype 5
html
  head
    title= title
    != renderStyles('fooStyles')
  body
    block content
    != renderScript('fooScripts')