Express-asset-manager NPM

express-asset-manager

Simple and easy to integrate asset manager for Express.js applications

Installation

npm install express-asset-manager

Features :

Transparent asset management.
- In development, each ressources are loaded by default.
- In production, ressources are grouped and minified.
Group JavaScript and CSS files with node-minify
AMD support with require.js
Less support

	Development	Production
JS (default)	Yes	Yes
JS with AMD	Yes	Yes
CSS (default)	Yes	Yes
CSS with @import	Yes	Yes
Less	Yes	Yes
Less with @import	Yes	Yes
CoffeeScript	Not yet	Not yet

JS (default)

{
    "app.js" : {
        type: "js",
        dir: "js",
        files: [
            "../lib/jquery-1.9.1.js",
            "../lib/jquery.eventemitter.js",
            "../lib/knockout-2.2.1.js",
            "app.js",
            "models/User.js",
            "controllers/user.js",
        ]
    }
}

JS with AMD

{
    "app.js" : {
        type: "js",
        dir: "js",
        main: "app.js",
        lib: "../lib/require.js",
        mainConfigFile: "config.js", // optional, relative to `dir`
        includeLib: true // optional, default: false, include requirejs in the processed file 
    }
}

CSS (default)

{
    "style.css" : {
        type: "css",
        dir: "css",
        files: [
            "bootstrap.min.css",
            "bootstrap-responsive.min.css",
            "style.css",
            "style-responsive.css"
        ]
    }
}

CSS with @import

{
    "style.css" : {
        type: "css",
        dir: "css",
        main: "style.css"
    }
}

It uses requirejs to inline in production.

Less and Less with @import

{
    "style.css" : {
        type: "less",
        dir: "less",
        main: "style.less",
        lib: "../lib/less.js" // path to `less.js` to parse .less assets in the browser in dev env
    }
}

You need to write @import (inline) to inline CSS files in production.

Exemple of usage

var assets = {
    "app.js" : {
        type: "js",
        dir: "js",
        main: "app.js",
        lib: "../lib/require.js"
    },
    "style.css" : {
        type: "less",
        dir: "less",
        main: "style.less",
        lib: "../lib/less.js"
    }
};
var assetManagerConfig = {
    rootRoute   : "/static",
    srcDir      : "./public",
    buildDir    : "./builtAssets",
    process     : "true"
};
app.use(require("express-asset-manager")(assets, assetManagerConfig));

app.configure('development', function() {
    app.use(express.static('/static', './public'));
});

// in production, use a reverse proxy instead
app.configure('production', function() {
    app.use(express.static('/static', './builtAssets'));
});

In your views :

<!DOCTYPE html>
<html lang="en">
<head>
    <%- asset("style.css") %>
</head>
<body>
    <%-body -%>
    <%- asset("app.js") %>
</body>

Resulting page in development :

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/static/less/style.less" rel="stylesheet/less" type="text/css"/>
    <script src="/static/lib/less.js" type="text/javascript"></script>
</head>
<body>
    <%-body -%>
    <script src="/static/lib/require.js" data-main="/static/js/app" type="text/javascript"></script>
</body>

Resulting page in production :

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="/static/less/style.css" type="text/css"/>
</head>
<body>
    <%-body -%>
    <script src="/static/lib/require.js" data-main="/static/js/app" type="text/javascript"></script>
</body>

At application startup, ./public/js/app.js will be read and processed by require.js optimizer. Output is saved in ./builtAssets/js/app.js.