0.0.29 • Public • Published


    Middleware for Connect (node.js) for handling your static assets.


    Via npm:

    $ npm install connect-assetmanager

    Handy pre/post hooks

    Make sure to check out connect-assetmanager-handlers for useful hooks you can use (inline base64 for image, vendor prefix fixes for example)

    What does it allow you to do?

    • Merge and minify CSS/javascript files
    • Auto regenerates the cache on file change so no need for restart of server or manual action.
    • Run pre/post manipulation on the files
      • Use regex to match user agent so you can serve different modified versions of your packed assets based on the requesting browser.
    • Supplies a reference to the modified dates for all groups through assetManager().cacheTimestamps[groupName] as well as md5 hashes assetManager().cacheHashes[groupName] which can be used for cache invalidation in templates.
    • Wildcard add files from dir

    Nifty things you can do with the pre/post manipulation

    • Replace all url(references to images) with inline base64 data which remove all would be image HTTP requests.
    • Strip all IE specific code for all other browsers.
    • Fix all the vendor prefixes (-ms -moz -webkit -o) for things like border-radius instead of having to type all each and every time.

    Speed test (it does just fine)

    Running with

    > connect app -n 4

    Common data

    Concurrency Level:      240
    Complete requests:      10000
    Failed requests:        0
    Write errors:           0

    Small (reset.css)

    Document Path:          /static/test/small
    Document Length:        170 bytes
    Time taken for tests:   0.588 seconds
    Total transferred:      4380001 bytes
    HTML transferred:       1700000 bytes
    Requests per second:    17005.50 [#/sec] (mean)
    Time per request:       14.113 [ms] (mean)
    Time per request:       0.059 [ms] (mean, across all concurrent requests)
    Transfer rate:          7273.84 [Kbytes/sec] received

    Larger (jQuery.js)

    Document Path:          /static/test/large
    Document Length:        100732 bytes
    Time taken for tests:   10.817 seconds
    Total transferred:      1012772490 bytes
    HTML transferred:       1009913368 bytes
    Requests per second:    924.51 [#/sec] (mean)
    Time per request:       259.597 [ms] (mean)
    Time per request:       1.082 [ms] (mean, across all concurrent requests)
    Transfer rate:          91437.43 [Kbytes/sec] received

    Asset Options

    path (string) - required

    The path to the folder containing the files.

    path: __dirname + '/'

    files (array) - required

    An array of strings containing the filenames of all files in the group.

    If you want to add all files from the path supplied add '*'. It will insert the files at the position of the *. You can also use a regexp to match files or use external urls.

    files: ['', /jquery.*/ , '*', 'page.js']

    route (regex as string) - required

    The route that will be matched by Connect.

    route: '/\/assets\/css\/.*\.css'

    dataType (string), ['javascript', 'css']

    The type of data you are trying to optimize, 'javascript' and 'css' is built into the core of the assetManager and will minify them using the appropriate code.

    dataType: 'css'

    preManipulate (array containing functions)

    There are hooks in the assetManager that allow you to programmaticly alter the source of the files you are grouping. This can be handy for being able to use custom CSS types in the assetManager or fixing stuff like vendor prefixes in a general fashion.

    'preManipulate': {
        // Regexp to match user-agents including MSIE.
        'MSIE': [
            , msieSpecificManipulation
        // Matches all (regex start line)
        '^': [
            , fixVendorPrefixes
            , fixGradients
            , replaceImageRefToBase64

    postManipulate (array containing functions)

    Same as preManipulate but runs after the files are merged and minified.

    The functions supplied look like this:

    function (file, path, index, isLast, callback) {
        if (path.match(/filename\.js/)) {
            callback(null, file.replace(/string/mig, 'replaceWithThis'));
        } else {
            callback(null, file);

    serveModify (req, res, response, callback)

    Allows you do to modify the cached response on a per request basis.

    function(req, res, response, callback) {
        if (externalVariable) {
            // Return empty asset
            response.length = 1;
            response.contentBuffer = new Buffer(' ');

    stale (boolean)

    Incase you want to use the asset manager with optimal performance you can set stale to true.

    This means that there are no checks for file changes and the cache will therefore not be regenerated. Recommended for deployed code.

    debug (boolean)

    When debug is set to true the files will not be minified, but they will be grouped into one file and modified.

    Using uglify-js instead of jsmin

    If you prefer uglify-js to jsmin (the default javascript minifier), you can use uglify instead by doing the following:

    1. Add uglify-js to your project's package.json
    2. Pass in { jsMinifier: 'uglify-js'} as a second argument to assetManager().

    Example usage

    var sys = require('sys');
    var fs = require('fs');
    var Connect = require('connect');
    var assetManager = require('connect-assetmanager');
    var assetHandler = require('connect-assetmanager-handlers');
    var root = __dirname + '/public';
    var Server = module.exports = Connect.createServer();
        , Connect.logger()
    var assetManagerGroups = {
        'js': {
            'route': /\/static\/js\/[0-9]+\/.*\.js/
            , 'path': './public/js/'
            , 'dataType': 'javascript'
            , 'files': [
                , 'jquery.client.js'
        }, 'css': {
            'route': /\/static\/css\/[0-9]+\/.*\.css/
            , 'path': './public/css/'
            , 'dataType': 'css'
            , 'files': [
                , 'style.css'
            , 'preManipulate': {
                // Regexp to match user-agents including MSIE.
                'MSIE': [
                    , assetHandler.fixVendorPrefixes
                    , assetHandler.fixGradients
                    , assetHandler.stripDataUrlsPrefix
                // Matches all (regex start line)
                '^': [
                    , assetHandler.fixVendorPrefixes
                    , assetHandler.fixGradients
                    , assetHandler.replaceImageRefToBase64(root)
    var options = { jsMinifier: 'jsmin' };
    var assetsManagerMiddleware = assetManager(assetManagerGroups, options);
        , assetsManagerMiddleware
        , Connect.static(root)


    npm i connect-assetmanager-chingon

    DownloadsWeekly Downloads






    Last publish


    • lesmo