Gruntjs is a really handy tool for automating common web design and development tasks such as concatenating, minifying and linting files.
The next step is unique to our particular set-up but we then update our HTML templates with a date/time stamped filename for the file that has changed, for example:
We also use Gruntjs to lint our files, this is useful as it identifies any common mistakes and syntax errors and helps to enforce good coding practices.
The other areas where Gruntjs has also excelled is compressing our images, using the Gruntjs plug-in “contrib-imagemin” we’ve set-up tasks to lossly compress the images used in our sites using jpegtran and optipng.
Gruntjs is still relatively new but it’s being developed at a very rapid pace as it’s clearly fulfilled a need of many web designers and web developers and as a result quickly gained popularity.
Yeoman, which is a workflow / project scaffolding tool from Google (definitely worth a look), uses Gruntjs extensively and has helped to boost its popularity further.
A good place to start with Gruntjs is by taking a look through the available plug-ins as they will likely trigger your imagination as to the myriad of tasks you could potentially automate with it. The “contrib” plug-ins that currently show at the top of the list are those that are maintained and contributed by the Gruntjs core team.
Here’s a list of the plug-ins we’ve used in our build script: