Using Grunt to automate development tasks: Part II

  • 0
  • March 5, 2014
Douglas Radburn

Douglas Radburn

Head of Technical

If you’re new to Grunt, or don’t know what it is, check out the first article I wrote which introduces it: Using GRUNT to automate development tasks: Part I

As explained in that first article, Grunt is a javascript task runner. It allows us automate all sorts of tasks, however, we’re still having to trigger a manual process by running Grunt every time we want it to do something.

Using watch, we can get Grunt to run tasks whenever something changes instead. So, for example, every time we update our JS, Grunt will automatically concatenate and minify it to an output file instead of waiting for us to run the file manually.

Watching happens through the official grunt-contrib-watch plugin.

Let’s get this installed as we have done in our previous post (it’s exactly the same process) – npm install grunt-contrib-watch--save-dev.

We configure watch by giving it specific file, or folder (or both) to monitor, then we tell it what tasks we want to run when it detects a change.

So, let’s take a look. I think it would be safe to say that we’d like Grunt to concatinate and minify our JS whenever anything in the js folder changes – not just when we run it; and not when we change some images or CSS.

This should be fairly straight forward. spawn stops Grunt spawning child processes and keeps the context within the main watch function.

Don’t forget to load the NPM Task, and also to register the task.


grunt.registerTask('default', ['concat', 'uglify', 'imagemin', 'cssmin', 'watch']);

There are a lot of other resources and extensions around Grunt. So, some further reading:

Free of charge. Unsubscribe anytime.