Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

code A guest post by Domenic Denicola, who works on web apps as a consultant at Lab49 in New York City, while in his spare time maintaining many open-source Node.js and web libraries. He’s recently been involved in building better standards for the web and for JavaScript as a whole, such as the Promises/A+ specification, the ES6 promises spec, and the work-in-progress WHATWG streams specification, and can be reached at @domenic.

In the last two articles in this series (Getting Started with Grunt and The Power of Grunt), we introduced Grunt and showed how you could use its expansive plugin ecosystem to automate your web development workflow. In this article, I will show you a few more advanced tricks for working with Grunt that you’ll find useful.

Running Grunt Tasks Concurrently

By default, Grunt runs tasks in sequence. If you have a task definition like the following:

You’ll first run JSHint, then run your Mocha tests, then compile your Stylus into CSS, and then browserify your code. Each of these processes can take a while, but none of them is actually necessary for the previous one to run. In fact, ideally, you’d like to run all of these tasks at the same time!

grunt-concurrent is a Grunt plugin that will let you do exactly that, with a very simple configuration format. For example, you could just add:

After adding this to your Grunt configuration, change your dev task definition to be:

For more complex situations, you may need to run some things sequentially, while running others concurrently. An example might be a release process where you need to run UglifyJS after browserifying your modules, but do these two things at the same time as compiling your Stylus. Such configurations can be accomplished like this:

You can also run tasks concurrently as part of a watch command, which is great: you almost never want to hold up your CSS compilation or module bundling on the results of your tests or linting!

Automatically Reloading When Watch Completes

Although an automatic, concurrent watch process is very close to perfection, it still has one small problem with the workflow. You might be familiar with this scenario: you make a change, you switch back to your browser window, you press reload, and nothing’s happened. You sigh, wait a little longer, and then press reload again. After a few tries, the watch process in the background has completed, and you see the updated content. But by the end of the workday, you’re a grumpy programmer, worn down by all those times your expectations of change were met with the disappointment of a slightly-too-slow watch process.

Well, Grunt has a solution for this too! It’s possible to have Grunt tell your browser to perform a live reload of the page whenever the watch process finishes. All you have to do is add a single option, livereload: true, to the watch task configuration.

By itself, this will just create a live reload server on your system that pushes messages to the client whenever the watch process finishes. To make that actually perform a reload of your page, you can either install a browser extension, or manually add a <script> tag to your page. Or you could use yet another Grunt plugin: grunt-contrib-connect makes it easy to create a simple Node.js static file server that, with a single option turned on, also automatically injects the live reload <script> tag for you.

All together, a live reload configuration for compiling Stylus files might look something like this:

To see this in action, run grunt dev to start the server and the watch process, then open up http://localhost:8000 in your browser. (8000 is the default port for grunt-contrib-connect.) If you then change either index.html or anything in the styles directory, the page will automatically reload once the watch is finished!

See below for Grunt resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Jasmine JavaScript Testing is a practical guide to a more sustainable JavaScript development process. You will learn by example how to drive the development of a web application using tests and best practices, and you’ll find a good section on Grunt.
Developing a Backbone.js Edge incorporates best practices and the techniques from the combined authors’ experience of developing many Backbone applications. Some of the resources on the web advocate inefficient or inelegant solutions and there are few that cover the whole library, and you’ll find a section on Grunt.
Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript’s grace and precision to write real browser-based applications. With clear examples and a focus on elegance, Eloquent JavaScript will have you fluent in the language of the web in no time.


One Response to “Grunt Tips and Tricks”

  1. Enrique Moreno

    Great 3 part tutorial. The explanation is very simple and easy to understand, and I didn’t knew that “connect” came with their own livereload! Super useful!