JavaScript task runners such as Grunt have become extremely popular with front-end developers. This is because they help to do the one thing which we all want to do in our jobs – save time!
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
Every front-end developer worth their salt knows about the advantages of minifying JavaScript files, and that’s exactly what this plugin does. Such is its popularity, it’s actually included in the Grunt Getting Started Guide. Despite the name, this plugin can also be used to beautify your JavaScript code too – although that’s not particularly useful for production use.
02. Sass
There may be some debate about which CSS pre-processor really does rule the roost, but here at Stickyeyes, 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
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 if you’re into that type of stuff.
04. Concat
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.
File concatenation should always be used in production for both JavaScript and CSS. This is commonly the last task to be ran – after the CSS pre-processing task and minification task. It’s easy to just tell this plugin to concatenate all the files in a specific directory, but beware the order that the files will be concatenated – you may need to give a specific order or name the files so they are always concatenated in the order you want.
05. ImageMin
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
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.
So you may set up one watch condition on your ‘js’ directory to run your JavaScript tasks, and another on your ‘css’ directory to run your CSS tasks. This means you’ll never have to manually run your main Grunt process! Just initialise the grunt watch task before you start making changes and you can forget it’s even there.
Words: Jamie Shields
Like this? Read this!
- Grunt vs Gulp: Which JavaScript build tool should you choose?
- 8 ways to improve your Grunt set-up
- The best free WordPress themes
