What if you could watch, compile, concatenate, minify and fingerprint all your web assets using just a simple file written in clear, human-readable YML syntax?
That’s it. No complicated .initConfig()
, no redundant code to describe tasks in JavaScript or CoffeeScript, just a simple YML file in your assets folder.
By looking at that file, ASPAX will:
Most likely you’ll want ASPAX installed as a global module:
To keep the global CLI module lightweight and dependency-free, ASPAX is using a plugin system to handle different source types such as CoffeeScript, LiveScript, client-side Jade templates, Stylus or LESS files, etc.
ASPAX will look for plugins in ./node_modules
folder, so you’ll have to install the necessary source handlers like this:
If you’re running ASPAX in a Node.js application root folder, consider using the --save-dev
option to avoid deploying the plugins to your production environment:
So far, the available plugins are:
If you need something else, please let me know and maybe I can do it, or better yet, feel free to do it yourself and notify me so I can list it here.
Each plugin npm should be named aspax-xyz-handler
, where xyz
is the file extension it refers to.
Each plugin npm should export a compile()
method with this signature (see example here):
…and optionally a findImports()
method to recursively find imported/referred files (see examples here and here):
The two main options are:
-s, --src <source>
: Assets source folder;-d, --dst <destination>
: Assets destination folder - defaults to public
in current folder.You can type aspax --help
in the console for advanced usage, but here are just a few CLI usage examples:
See this tutorial for a nice step-by-step guide on how to use ASPAX with Express.js.
The syntax of aspax.yml
should be quite simple and human-friendly. Here are just a few tips:
Just add the appropriate flags after the asset file name (the order is irrelevant):
The flags will have no effect in development mode, but in production:
-1387239833024
before its extension;.min
before the extension.Note: fingerprinting will work for anything, while minification only makes sense for JS and CSS files.
Some source-handling plugins are also accepting flags (i.e. bare
for CoffeeScript files). Use the same syntax:
You can add any number of whitespaces around semicolons and flag separators for readability. All of the following are equivalent:
js/app.js|fp|min:
js/app.js |fp|min:
js/app.js | fp | min :
You can also add comments and even format your code like this:
ASset PAckager, and X because ASPAX is an evolution of ASPA, a similar module I’ve built in the past.
ASPAX brings in some breaking changes by simplifying the YML file syntax and introducing a plugin system to handle various source files. Simply updating ASPA wouldn’t have been possible without annoying the happiness of too many users.
I’m a strong advocate of open-source philosophy and I’m also using this module in my Node.js projects, so I’ll do my best to keep it up to date. If you notice ASPAX has outdated depencencies, most likely there’s going to be an update soon.
To name just a few:
If you think your project should be listed here, don’t hesitate to let me know about it.
If you find this piece of software useful, please tweet about it and endorse me on LinkedIn: