Getting Acquainted with Grunt

I’ve heard a lot about Grunt recently and decided it was about time I took the oppertunity to try it out and see what all the fuss was about.

Out with the Old

For a while now we have been using CodeKit to do all our front-end (mainly SASS) compilation for Dunked and have come accross a few niggles. The biggest one being that we allow CodeKit to maintian a codekit-config.json which resides in the root of our Subversion repo.

This is great for keeping our Codekit settings in sync, but it holds a list of every single file in the repo and what state each file is in. This has always annoyed me and I’ve always thought this was way over the top. I would love to simply define which files Codekit should “watch” and ignore everything else. Plus it means that every time you commit to Subversion you need to commit this behemoth codekit-config.json file as something has changed.

In with the New

So looking at Grunt was appealing as it meant I could drop CodeKit completely, it would let me control the entire compilation process like I wanted, and I could add several tasks that CodeKit didn’t support.

Installing Grunt was simple (I already had Node installed) and I then spent the next two days carefully crafting our new Dunked Gruntfile.js file. I basically used this article by Chris Coyier as a guide for getting going, which was really helpful.

Now we have an awesome front-end compilation setup for Dunked that compiles our SASS, runs JSHint and CSSLint on our code, concatenates and minifies all of our JS and CSS and it even auto-prefixes our compiled CSS (oh and it uses Livereload too). Despite the fact it took a couple of days to configure properly, I think that it’s totally worth it in the long run.

And the best thing is that its completely portable. Our Gruntfile.js resides in the root of our Subversion repo, so if another developer wants to get going, they simply have to run the following two commands in Terminal:

npm install grunt watch


Addmittedly if you’re not a command line ninja (like me) you may find having to open Terminal every time you need to work on your code a bit cumbersome. I did like the fact CodeKit has a GUI and I could just leave it running. Maybe someone will create something similar for Grunt. However these days a lot of front-end development uses the command line now anyway. So maybe this is just something we will have to get used to.

Update: After a few requests I’ve put up a stripped down version of our Gruntfile.js on GitHub so you can have a nosey.