6 essential Grunt plugins you should be using

Grunt's bull mascot

Give your Grunt more grunt with these great plugins

JavaScript task runners such as Grunt (opens in new tab) 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 (opens in new tab)

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 (opens in new tab). 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 (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.

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 (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.

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

Jamie Shields is a back end developer at digital marketing agency Stickyeyes (opens in new tab).

Like this? Read this!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.