node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ยป


Assets pack

The module is meant to be used in development mode. I.e. it is not a tool that you can add in production phase. It simply watches for changes in a specific directory and pack your assets.


  • watches for changes
  • perform packing/compilation of css, less, javascript or whatever you want
  • minify the output if necessary
  • exclude files


npm install assetspack

or globally:

npm install -g assetspack


The module's configuration works with json configuration. When it is used via the command like you should place your settings in .json file.

Via the command line

Create assets.json file and execute the following command in the same directory


If your configuration file is with another name or it is just in another directory use

assetspack --config [path to json file]

In code

var AssetsPack = require("assetspack");
var config = [
        type: "css",
        watch: ["css/src"],
        output: "tests/packed/styles.css",
        minify: true,
        exclude: ["custom.css"]
var pack = new AssetsPack(config, function() {
    console.log("AssetsPack is watching");
pack.onPack(function() {
    console.log("AssetsPack did the job"); 


The configuration should be a valid json file/object. An array of objects:

    (asset object),
    (asset object),
    (asset object),

Asset Object

The basic structure of the asset object is:

    type: (file type /string, could be css, js or less for example),
    watch: (directory or directories for watching /string or array of strings/),
    pack: (directory or directories for packing /string or array of strings/. ),
    output: (path to output file /string/),
    minify: /boolean/,
    exclude: (array of file names)

The pack property is not mandatory. If you miss it then its value is equal to watch. minify by defualt is false.

Here are few examples:

Packing CSS

    type: "css",
    watch: ["tests/data/css", "tests/data/css2"],
    pack: ["tests/data/css", "tests/data/css2"],
    output: "tests/packed/styles.css",
    minify: true,
    exclude: ["header.css"]

Packing JavaScript

    type: "js",
    watch: "tests/data/js",
    pack: ["tests/data/js"],
    output: "tests/packed/scripts.js",
    minify: true,
    exclude: ["A.js"]

Packing less

The packing of .less files is a little bit different. pack property is mandatory and it is basically your entry point. You should import all the others less files there. The exclude is not available here.

    type: "less",
    watch: ["tests/data/less"],
    pack: "tests/data/less/index.less",
    output: "tests/packed/styles-less.css",
    minify: true

If you find any problem, please check the tests/packing-less.spec.js.

Packing other file formats

assets-pack works with any file format. For example we can combine html templates into a single file:

    type: "html",
    watch: ["tests/data/tpl"],
    output: "tests/packed/template.html",
    exclude: ["admin.html"]

The only one thing that you should know here is that there is no minification.