Grunt: the ultimate task runner for web developers.

Grunt Simplifying your workflow is an invaluable undertaking that can be applied to any type of work. Web development is no exception, and the Javascript task runner Grunt is probably the most popular tool for automating monotonous tasks and speeding up your workflow. Like many people I was scared of the command line at first so I opted for a task runner with a GUI, namely Prepros. Eventually I realized I needed more power, which even the paid version of Prepros couldn’t provide. So I decided to give Grunt a go and I followed Chris Coyier’s guide “Grunt for People Who Think Things Like Grunt are Weird and Hard.” As the name suggests it was very beginner-friendly, which is why I don’t feel I need to write my own guide. What you will find here is a supplement to Chris’s guide with a few more in-depth explanations of the few things I had trouble with, as well as some of my own modifications. Before we jump into it, here is a list of some of the things Grunt can do for you:

  • Compile LESS, SASS, SCSS, Compass, and loads of other languages
  • Autoprefix CSS files
  • Code-hinting
  • Concatenate and minify various file types
  • Optimize images
  • Build image sprites and SVG icons automatically (!)
  • Start a server

And a hell of a lot more! After installing Grunt and its dependencies, it’s up to you to configure the tasks you want it to carry out for each project and when. From there, it’s a breeze: simply type grunt into the command line and it all happens automagically. Alternatively, specify a single task by typing grunt [task name]. For example, grunt concat concatenates everything you’ve configured Grunt to concatenate in your project. Alternatively, grunt:css would concatenate only CSS files. If this all sounds confusing, I recommend just jumping into it and things will start making sense.

Installing Compass

One of the things Chris Coyier doesn’t mention in his article is how to incorporate Compass into a Grunt workflow. As Christian Krammer mentioned in the article’s comments section, “if you use Compass (e.g. you use mixins like border-radius, which you really should), install grunt-contrib-compass instead of the mentioned grunt-contrib-sass. It’s basically the same with the same configuration variables.” The thing is that Compass has some dependencies so incorporating it into Grunt is not as straightforward as most other plugins. Compass The first thing you need to do is check if you have Ruby installed on your system and if not, install it. To do all that I recommend following the short Ruby on Rails Installation tutorial at tutorialspoint. Basically if you’re on OS X or Linus you probably already have Ruby installed, and if you’re on Windows, you can download and install it from RubyInstaller. The next step is setting up the Ruby environment. RubyInstaller should have created a shortcut called “Start Command Prompt with Ruby” inside the Start menu. Click on it and then type gem update –system && gem install compass into the command prompt. You don’t have to be in your project’s directory to do this. After installing the Ruby environment, it should be available to all your projects and you can install grunt-contrib-compass like any other plugin.

Installing LiveReload

LiveReload The last thing Chris Coyier shows us in his article is how to incorporate LiveReload into our Grunt installation. Unfortunately it didn’t go so smoothly for me. I suspect it’s because I’m running my site from a DesktopServer server, but I haven’t tested on different servers to confirm this. What happened was I got a pop-up message from the LiveReload plug-in when I tried to activate it: “Could not connect to LiveReload server. Please make sure that a compatible LiveReload server is running. (We recommend guard-livereload, until LiveReload 2 comes to your platform.)” If you run into the same problem you can solve the issue by actually installing the LiveReload app in addition to the browser plug-in. That also means you can forego the extra code (options: {livereload: true,}) in gruntfile.js. Add your project folder to the LiveReload app and remember: you need to have both the app running and the browser plug-in activated in order for live changes to show in the browser.

Subtasks

You can get pretty specific about what you want Grunt to do and when. Suppose you wanted to concatenate both Javascript and CSS files, so that you would end up with production.js and production.css. The plugin grunt-contrib-concat Chris Coyier recommends works on a variety of file types, so all you need to do is define the Javascript and CSS subtasks separately and then call them by their name. An example will make it easier to understand:

concat: { // Javascript js: { src: [ ‘js/*.js’,], dest: ‘js/build/production.js’, }, // CSS css: { src: [ ‘css/style1.css’, ‘css/style2.css’, ], dest: ‘css/build/production.css’, }, },

Now anytime you want to concatenate only Javascript, you can call concat:js. When you want to concatenate only CSS, you can call concat:css.1 And if you want to concatenate everything, just call concat. 1 You don’t have to name these subtasks js and css; call them whatever you want. 

Final thoughts

Grunt is an extremely powerful task manager guaranteed to speed up your workflow. Installing things like Node.js and Ruby is a one-time thing. After that, you’ll be ready to install different plugins for different projects with just a single line of code. Configure Gruntfile.js (why not use a previous project as a template?) and you’re done! It’s actually simpler than it seems and will make your life easier in the long run.