#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.
Create assets.json file and execute the following command in the same directory
assetspack
If your configuration file is with another name or it is just in another directory use
assetspack --config [path to json file]
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),
...
]
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:
{
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"]
}
{
type: "js",
watch: "tests/data/js",
pack: ["tests/data/js"],
output: "tests/packed/scripts.js",
minify: true,
exclude: ["A.js"]
}
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.
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.