Organising Your Grunt Tasks

27 February 2015

I've been slowly and steadily working on Squealer in my spare time and evenings recently. Trying to create a set of 'starter files using Grunt. Squealer isn't really a new project. I did have a very old 'first attempt' at something using Grunt when the task runner was pretty fresh to the industry.

One thing I didn't like about it was the huge Gruntfile.js I was creating at the time, luckily this is something I was able to address in this iteration. Instead of spitting out all of the plugins code into one file I could simply abstract them out into their own separate .js file.

Now my Gruntfile.js is simply

module.exports = function (grunt) {
  'use strict';
  require('load-grunt-config')(grunt);
  require('time-grunt')(grunt);
};

Using this I now have a folder, called grunt, where I store these separate .js files which gets pulled in. What I have to work with this now is a aliases.yml file that contains several options when using Grunt.

Not Just JavaScript and Sass

I don't just want my Grunt task runner to compile Sass, uglify JS and minify all the things. The great thing with Grunt (and Gulp and others too) is the great plugins directory that is available. I've got plugins for image optimisation, for sprite generation, performance tests, creating a styleguide, prefixing CSS with vendor prefixes and more.

I don't really want to run 'all the things' I've got in my task runner running at the same time. Do I really need to be making sure I optimise every image I include whilst I'm developing the site, or can that wait? Do I need CSS file size calculations everytime I change something in Sass that gets compiled? Do I really need all the vendor prefixes when I'm using a browser that supports 99% of what I use, even CSS3 animations? What about generating that styleguide, does that have to happen on each new Sass partial created?

Don't run everything all at once

Essentially the answers' no. Running everything at the same time will make things slower and waste a little bit of time. The great thing about that .yml file is I can easily split out the plugins I've included so I can choose and run some of the plugins at the same time. For example, when I'm developingg I only really want be compiling my Sass and Jade files. Minifying CSS and JavaScript files can wait. Optimising images can wait.

I won't be keeping an eye on the CSS file size and performance statistics every waking hour so they're in a separate task to when I'm creating the styleguides from my Sass partials. I'm probably going to only optimise my images on their own once in while or nearing the end of project before it gets on any server. So that task won't be included in a set of tasks to clean and minify my JavaSript and CSS including removing any unused CSS and creating a stylesheet for Internet Explorer 8 and below.

Currently I have groups of tasks for:

It's not an exhaustive list but it allows for more specific development making any compile times that little bit quicker when working in the guts of a website: The HTML, CSS and JavaScript.

Making it work

The 'framework' Squealer is still a work in progress. The YAML file containing the grunt plugins tasks will be changing to make it more 'specific' to tasks needing to be run. I've a few more plugins I want to include too. Bower is something I need to look at to call in things like jQuery and put it where it's needed in the folder structure.

Hopefully from this you've seen a nice logical jump to abstracting your Grunt plugins into separate files and also benefit in splitting out the tasks you need to run into separate groups as needed.