Grunt – for automating builds in Front End land

Grunt is a front end build tool I’ve used on the last several projects. It handles CSS / JavaScript minification, concatenation, and linting really well.  Some of my legacy projects use a combination of bash and Yahoo UI Compressor, which I’m now switching away from in favor of Grunt.

What I liked about Grunt from the start is, it is 100% command line based!  Never seen a front end tool that lives on the command line before. That alone got me excited, but it gets better. Grunt is versatile given its plugin architecture. There are over 2750 Grunt plugins at the time of this writing. For example, Grunt can be used to run unit tests, setup as a ‘watch’ to automatically build SASS while developing, and even run PHP, Ruby and Python tasks.

Grunt runs on Node.

Grunt depends on node and npm (node package manager). It is very simple to get started.

$ npm install -g grunt-cli

Then you drop a Gruntfile.js into the root of your project and start configuring.

Here is a sample Grunt  script.

This script combines the web app’s JavaScript and CSS files into production ready files. This is in accordance with the YSlow recommendations for limiting the number of .js and .css files a web application downloads the first time it loads. It also has a task for running jslint, which checks the JavaScript I wrote for obvious problems and stylistic errors.

To kick it off:

$ grunt minify

Results in the built JavaScript and CSS files in the /build/ folder.

To run the lint task (powered by jshint in this case):

$ grunt lint

For those of you coming from the Java world:

Grunt works a lot like Ant. It does the same things in terms of automating the build process, compilation (well in this case minification), cleaning the build folder, and running unit tests.

There is a companion tool called Bower which reminds me of Maven in the way it resolves dependencies. A second companion tool called Yeoman works similar to Maven archetypes in that it provides pre-built projects with the scaffolding setup.

The trifecta – Grunt, Yoeman, and Bower:

Grunt by itself is just a build system, but combined with Yeoman ‘yo’ for short, and Bower it gets a lot more powerful.  Descriptions of each from the Yeoman website:

  • yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.”
  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.”
  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.”

Other thoughts:

At the moment, NPM is a bit like the wild west meets woodstock. The progressive free love that is the npm echo system continues to crank out new packages and interwoven dependencies at a staggering rate. No one person or company is in control of the endless supply of new packages and plugins that are available. That makes it great. It also makes it unstable and insecure.  See my post on Software Ghettos for some thoughts on using open source projects of all shapes and sizes as dependencies.

On rare occasions it is frustrating when something goes wrong with Grunt. If you are lucky it is due to a version mismatch in the local environment and ‘$ npm cache clean‘ might fix it. The error messages can be vague and misleading. I have ran into situations where a fix was available but not ported into the main npm tree or even merged into the plugin’s repo. In these cases I had to override the version manually or do some other hacky fix to get going again.  I have also noticed subtle differences between Windows / Mac / Ubuntu in the way the CSS / SASS related plugins operate. In these cases I deferred to building on Mac. (I really should have documented the issue and made a blog post about it. I wrote it off at the time as a fluke so take that last observation with a grain of salt.)

All in all Grunt is a great tool.  I use it, my life is better, my clients benefit, and releases proceed as planned.


This entry was posted in Application Development, Code and tagged , , , , . Bookmark the permalink.

Comments are closed.