assets-packager

What is assets-packager?

Assets-packager is a node.js-based tool for compiling, minifying, and packaging CSS and JavaScript assets into production-ready packages.

CSS bundles are created from assets which are

• compiled from LESS templates (optional)
• minified using clean-css
• bundled
• preprocessed via enhance-css (inline images, asset hosts, etc)
• packaged (and optionally precompressed)

And JavaScripts ones are

• bundled
• minified using the wonderful UglifyJS
• packaged (and optionally precompressed)

Usage

How to install assets-packager?

npm install assets-packager

Tl;dr. Give me a quick demo!

OK. Clone this repo.

git clone [e-mail]:GoalSmashers/assets-packager.git

Then open examples directory and run:

assetspkg -c assets.yml -g

Now check examples/public/javascripts/bundled and examples/public/stylesheets/bundled for bundled code. That's it!

Is it fast?

You should have just witnessed it by yourself. :-)

We use it on our production servers at GoalSmashers.com and it builds 20 CSS and 15 JavaScript bundles from hundreds of assets in around 15 seconds.

So yes, it is fast!

How to use assets-packager in my application?

First of all it assumes you have Rails-like directory structure for your assets, e.g:

• public
  • javascripts
    • some javascripts
  • stylesheets
    • some stylesheets

Then it also needs a configuration file (here we name it assets.yml) with a definition of JS/CSS bundles, e.g:

# stylesheets
stylesheets:
  application: 'reset,grid,base,application'
# javascripts
javascripts:
  application:
    - 'vendor/jquery'
    - 'application,helpers'

We recommend placing it somewhere else than in your public folder (could be config in case of Rails).

Now you can bundle all these packages with a single command:

assetspkg -c assets.yml

All the packages go into public/javascripts/bundled and public/stylesheets/bundled. You'll probably want to put that command somewhere into your build/deploy script.

How to configure it?

assetspkg -h

Options include:

• -g - create gzipped bundles (useful if your server supports serving precompressed files, like nginx)
• -n - create alternate stylesheets bundles without inlined images (Explorer 6/7, I'm looking at you!)
• -a - use asset hosts for image URLs, e.g -a [assets0,assets1].yourdomain.com
• -o - narrow the set of bundles being build, e.g. -o application.js, -o *.css, or -o public.css,application.css
• --nm - do not minify JS, only combine (use the beautify option of UglifyJS)
• -i - when using --nm, specify the indentation level in spaces

The feature I want is not there!

Open an issue. Or better: fork the project, add the feature (don't forget about tests!) and send a pull request.

How to test assets-packager?

First, install dependencies

npm install
npm install -g less@latest

Then, run the specs

make test

Contributors

• Jean-Denis Vauguet (@chikamichi) - --nominifyjs and --indent options allow for combination-only processing.

License

Assets-packager is released under the MIT license.