https://github.com/krasimir/assets-pack
Clever packing of .css, .less, .js files
https://github.com/krasimir/assets-pack
Last synced: 6 months ago
JSON representation
Clever packing of .css, .less, .js files
- Host: GitHub
- URL: https://github.com/krasimir/assets-pack
- Owner: krasimir
- Created: 2013-02-04T10:20:19.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-08-15T08:41:04.000Z (about 12 years ago)
- Last Synced: 2024-11-07T03:47:16.410Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 20
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#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.
## Features
- watches for changes
- perform packing/compilation of css, less, javascript or whatever you want
- minify the output if necessary
- exclude files
## Installation
npm install assetspack
or globally:
npm install -g assetspack
## Usage
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
assetspack
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");
});
## Configuration
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.