More Grunt magic with usemin

Following the article about the livereload plugin, here is another plugin to do cool stuff with Grunt: usemin. This time, it's about helping the concatenation and minification of JavaScript and CSS files.

As you want your app to download fast, you'll usually concatenate and minify the Javascript and CSS. This means somewhere in you Gruntfile, you need to maintain a list of which files must be concatenated. Boring and error-prone :( Especially as if you think about it, this list is already there in the HTML files (could be the index.html or the page running your tests), so why not use this? That's just what usemin does.

usemin provides two tasks:

• useminPrepare to configure the concatenation and minification in Grunt according to the content of the HTML files of your project;
• usemin to replace the multiple <script> or <link> tags by a single one pointing to the minified version.

For the plugin to work its magic, you'll obviously need to edit your Gruntfile to configure the two tasks and define when to use them in your build. You'll also need to add a few comments to your HTML so that usemin knows which scripts/CSS should be concatenated and minified and how it should name the resulting file.

I'll leave the details of the configuration to usemin's documentation, as I would just be paraphrasing :). Leaner Gruntfile, less room for human error, I'd say it's a win, wouldn't you?