What if you could watch, compile, concatenate, minify, compress and fingerprint all your web assets using just a simple file written in clear, human-readable YML syntax?
A few weeks ago, I was having a chat with a couple of fellow Node.js developers about the importance of client-side asset management and packaging.
As we all know, although no more than two years ago Node.js was just an exotic emerging technology, it now lays a solid foundation for building really fast web applications and websites. However, the "snappy" behaviour of your products depends on more than just the underlying platform speed, one of the other factors being the way you're packaging and delivering your client-side assets to the browser.
For maintainability and readability during development, you want your scripts and style files in a rich and meaningful hierarchy - everyone using Backbone.js, Bootsrap / Zurb plus five or six other libraries surely knows what I'm talking about. And not all of them are suitable for CommonJS/Component usage style. Not to mention the fact that some of us like CoffeeScript, some prefer to write in LiveScript, and some favour Stylus or LESS over plain CSS. It's a rich and free ecosystem, but browsers only understand plain JS and CSS.
For the sake of speed, in your production environment you'll want all your files concatenated, minified and compressed as efficiently as possible - ideally just one
app.js file and one
And there's also the issue of fingerprinting - if you care for speed, you'll want to use browser and proxy caching to the maximum, which means you're also going to need a "cache busting" mechanism.
In the RoR world, there's the excellent Asset Pipeline that helps you achieve all that.
In the world of Node.js, there is, of course, more than just one way to do it, but lately more and more developers are talking about using the excellent Grunt task runner for client-side asset management and packaging. While grunt is an extraordinary general purpose tool, there are people (including myself :-P) who believe that writing a complex asset management
Gruntfile.js is a bit cumbersome and runs the risk of becoming difficult to maintain for medium-to-large projects. Too much configuration, too much code mixed with file names... For instance, this sample gruntfile is a very simple one; I've seen asset management scenarios measuring over 300 lines.
So why not sticking to convention over configuration and sensible defaults instead?
What if you could watch, compile, concatenate, minify, compress and fingerprint all your web assets using just a simple file written in concise yet human-readable YML syntax, like this:
js/app.js|fp|min|gz: - lib/bootstrap/js/bootstrap.js - lib/moment.js - lib/jade/runtime.js - scripts/namespaces.coffee|bare - templates/item.jade - scripts/index.ls|bare css/app.css|fp|min|gz: - lib/bootstrap/css/bootstrap.css - lib/bootstrap/css/bootstrap-theme.css - styles/index.styl|nib favicon.png: images/favicon.png fonts/bs-glyphs.eot|fp: lib/bootstrap/fonts/glyphicons.eot fonts/bs-glyphs.svg|fp|gz: lib/bootstrap/fonts/glyphicons.svg fonts/bs-glyphs.ttf|fp|gz: lib/bootstrap/fonts/glyphicons.ttf fonts/bs-glyphs.woff|fp: lib/bootstrap/fonts/glyphicons.woff
If you like the idea, please have a look at ASPAX, a command-line utility I've bee working on that enables you to do just that - manage your client-side assets based on a single, human-readable YML file.
Ok, there are also plugins you have to install for compiling various source file types (
.styl, etc., just as you have in the Grunt ecosystem), but since ASPAX aims to be just an asset management tool, there's a lot less plumbing and configuration to do than you'd normally need for a grunt scenario.
At the moment, there's a spartan mobile-friendly project website hosted on GitHub at aspax.github.io, a quick step-by-step tutorial on using ASPAX with Express.js here, and plugins to handle six common source file types:
- aspax-coffee-handler for CoffeeScript;
- aspax-iced-handler for IcedCoffeeScript;
- aspax-ls-handler for LiveScript;
- aspax-jade-handler for client-side Jade templates;
- aspax-styl-handler for Stylus;
- aspax-less-handler for LESS.
Oh, and there's also a demo repository with an Express.js application here: aspax-demo.
Hopefully I'll get back in January with a module for koa.js and another tutorial...
Thank you all for reading so far, please feel free to have a look at the project page and GitHub repos, give it a try and share your thoughts here! :-)