Grunt, Grunt!

GruntJs is my best friend in my development world! It does a lot of things and does them exactly as I tell it to. No-one else deciding my workflow, because my workflow is obviously the best and everyone else is wrong. I work best by doing the things I want, how I want them.

Before I even start coding, I set out exactly how I want Grunt to work, I specify everything I think I will need and get it running. Half way through a project, I need some other tasks doing, add in a new Grunt plugin and done. Few lines of code and it is ready for exactly what I want.

My Grunt workflow

Most of the stuff I do is built with SASS and CoffeeScript (‘cause I mean they are both amazing!). So I plugin in contrib-watch to watch my files and then run the SASS and CoffeeScript tasks. For CoffeeScript, I use contrib-coffee and grunt-sass.

Why grunt-sass? Because it is as quick as Usain Bolt. By the time I have tabbed out of Atom and into Safari, the SASS has compiled and I can see the changes. contrib-sass is the other option to choose from (I presume there are more, but these are the two I have used), but I found it slow to compile even the smallest of SASS files.


The last thing you should always do before any site goes live is minify, make it fast to load. If it saves a few KB of downloading, then I’m all for it! As I am using grunt-sass it compiles all for me. But there are plugins to minify CSS for you contrib-cssmin.

JavaScript as well you ask? Why yes! The one I use is contrib-uglify.

Images can also be compressed through a plug-in! I use contrib-imagemin and it saves me a few more KB.

All these tasks used to be done through various different websites and several different tools. Instead one tool, using the command line which we already love and use daily!

Linting & Testing

We all like to test our code to ensure any breakages happen before it goes live. QUnitJs is great for this. Write a few tests, test they all pass. If any changes in the future break your lovely feature BAM! Error reported! Lucikly you were using unit testing? Right?! And you are using Grunt with contrib-qunit to test the code before it builds any files, right?! No? Well maybe you should…

Everyone has a specific style they like to keep to, and everyone likes to enforce this onto others. Linting tools help this and of course plugins for Grunt as well! JSLint and JSHint so take your pick on what to use, even use them both. Hardcore style!

Should I use Grunt?

I know you are asking this question right now. You’ve looked at the Grunt website and all the plugins are thought to yourself ‘Yep I could use this’. But should you? Well obviously every project and every person is different. But if you are doing a lot of repeated tasks all through different tools. Perhaps you should think about using Grunt. Its simple to plugin, configured your way and runs in the background whilst you are working and being awesome.

Every project is different so think about the project first. Think what it needs. It might not need it straight away, but it might eventually. This website for example doesn’t use Grunt, I let Jekyll do all the work for me. It compiles everything for me and returns plain HTML.

At Ph.Creative we use Grunt on almost all of our projects, if not, I tend to add it in to do all the tasks we want to do to the website. It compiles our SASS into CSS (which is a custom build of Bootstrap). Grunt watches for changes and reloads the webpage in the background. Sometimes it even runs a simple express server for an AngularJS web app.

Go Grunt away!

GruntJS is an amazing tool! I dare you to go and look at it and understand the power of what it allows you to do. It’s not a single tool to do one task, it’s a single tool to do lots of different tasks.

npm install -g grunt-cli

Logo above taken from GruntJS website