But with more than 5,000 (and counting) Grunt plugins now available, it can be hard for developers to find those 'diamonds in the rough'. We've taken a look back at our time getting stuck into Grunt to find the perfect recipe of Grunt plugins that you should be using.
01. Uglify (opens in new tab)
02. Sass (opens in new tab)
There may be some debate about which CSS pre-processor really does rule the roost, but here at Stickyeyes (opens in new tab), we've settled on Sass rather than its main rival, Less. This plug-in enables us to write our Sass files and have them compiled to CSS automatically. The merits of using a CSS pre-processor warrants a separate article in itself, but it's safe to say that if you're not using one already you're very late to the party!
03. CSSMin (opens in new tab)
This plugin is the CSS equivalent of Uglify. It simply gets any specified CSS files and minifies them. Of course if you're going to use this in conjunction with the Sass plugin then you need to ensure that this task is ran after the Sass task.
There are lots of alternatives to CSSMin which can also reduce the size of your CSS files using slightly different techniques; CSS nano, CSS wring, CSS shrink, etc. Read this handy benchmark (opens in new tab) if you're into that type of stuff.
04. Concat (opens in new tab)
As the name suggests, this plugin simply takes multiple files and concatenates them into one. As with minifying code, concatenating files is also an age-old best practice for reducing page load times.
05. ImageMin (opens in new tab)
In the same vein as CSSMin and Uglify, ImageMin tackles another age-old problem for page load – image file size. Image 'minification' is usually a first port-of-call for optimisation, so this plugin is essential to reduce the total page file size down as much as possible.
If you're working with JPG, PNG, GIF or SVG (an ever-increasingly popular vector image format), this plugin will result provide lossless reductions in the file size of your images, without you having to lift a finger. If you have a lot of images in your project it is a good idea to only run this task when you are pushing to production, rather than running this task on a watch event (see next point).
06. Watch (opens in new tab)
This plugin does not actually affect your website front-end, but it is extremely useful in creating an efficient Grunt process. Watch simply keeps an eye on any directories you specify, and once something changes it will automatically trigger certain Grunt tasks.
Words: Jamie Shields
Jamie Shields is a back end developer at digital marketing agency Stickyeyes (opens in new tab).
Like this? Read this!