Automating front-end build processes using Grunt

As front end development has become more and more complex over the last few years, developers have started to use a range of different tools for different purposes. Perhaps you are working on a simple project with an AngularJS front end.

• You will need Karma (http://karma-runner.github.io) to run your JavaScript unit tests and end to end tests. Of course you will need 2 configuration files for Karma, one for unit tests and one for end to end tests. Remember to run both sets of tests before each new release of your project! It’s probably a good idea to run them whenever you make a change as well.

• You want to concatenate and minify your JavaScript in production, so you are using UglifyJS (https://github.com/mishoo/UglifyJS) for that. You need to run it each time you create a new release, but that’s ok! Just remember to run the unit and end to end tests first!

• The front-end guys want to use Compass (http://compass-style.org/) so their style sheets are easier to understand and maintain. Cool! Just remember to build the stylesheets before each new release. Oh and don’t forget to run the unit tests, end to end tests, and build the JavaScript as well.

• As the JavaScript and CSS is now being built, it will need to be copied into a build directory – not just left with all of your source code. This is just copying files. Easy! You can do it manually. Don’t forget to run the unit tests, end to end tests, build the JavaScript and build the CSS first. Also, only copy the built versions of the code!

• HTML templates and images will also need to be copied to the build directory, and any references to the unbuilt files in the HTML will need to be changed to reference the newly built files. Ugh, this is a tedious job. BTW, don’t forget to run the unit tests, end to end tests, build the JavaScript, build the CSS, and copy the JavaScript & CSS first!

Wow! Building this project is already turning into a really complicated and error prone process. You could write a script to build it, but that involves quite a bit of time and effort and you would need to teach each new developer on the project how to use your bespoke build script. This is where Grunt comes in.

Grunt is a JavaScript task runner that you can use to create a simple interface that developers can use to build your project. This alone is not that big of a deal, you could just write a script to do it after all.

What makes Grunt special is that it comes with a nice clean API for defining tasks, and a standard way of passing in configuration options to these tasks. The great thing about this approach is that modular tasks can be defined and then imported into different projects, where they are then configured for a specific use case. If we consider the example build process above, all of the steps can be covered by pre-built Grunt tasks that are freely available. See http://gruntjs.com/plugins.

Grunt is configured using a “Gruntfile” placed in your project. Within this file you can specify which pre-made tasks you would like to import, define custom tasks, configure tasks for your use case, and create aliases for sets of tasks. Developers can run the tasks in your project using the Grunt command line tool.

In this case, you would create a “test” alias that would use the “grunt-karma” task to run the unit and end to end tests. The configuration for each set of tests would be defined inside the Gruntfile. Great, now developers can run all of the tests at once with a single command – “grunt test”. The build task is just as simple to set up, but involves a bit more configuration. You would need the following grunt tasks:

• https://github.com/gruntjs/grunt-contrib-compass – This task runs Compass using configuration specified in your Gruntfile.

• https://github.com/gruntjs/grunt-contrib-copy – A simple task that you can use to copy files.

• https://github.com/tinganho/grunt-contrib-usemin – This task is awesome! Check out the link to see a detailed description of what it does – it takes care of concatenating, minifying and updating the links to your JavaScript files in the HTML.

These tasks are configured in the Gruntfile and a “build” alias is created that runs the “test” alias as well as the Compass, Copy and Usemin tasks. Now developers can build the entire project with one command – “grunt build”.

Even though this is still a complicated build process behind the scenes, anyone can run it with this one simple command.

For tutorials and more information about Grunt, head over to http://gruntjs.com/. It’s a really great tool that has helped the front-end team at Nomensa simplify and speed up the build process for front-end code. If you can see the benefits of using Grunt, but are worried about the amount of work initially required to create your Gruntfile, check out Yeoman (http://yeoman.io/). Yeoman will create a Gruntfile for you, based on your answers to a few simple questions. To sum up, if your front-end build process is complicated and full of error prone manual steps, use Grunt to hide all of that complexity behind a simple “build” task!