Getting started with Grunt: Automating your development workflow

Introducing Grunt

Grunt is an automation tool powered by NodeJS. It works with plugins and allows you to automate the execution of development tasks such as minification, Sass/LESS to CSS, merging of files and those other repetitive tasks you perform during development.

Earlier versions of grunt came with built in functionality however with recent versions such as the one used here (0.4.1) you will have to install plugins for each individual function you wish to perform.

Installing Grunt

First we will have to install grunt-cli. This lets us run grunt from the command line.

To install it globally and ensure grunt and grunt-cli are available to all your projects add the -g flag.

npm install -g grunt-cli grunt

Once this is done, we’re ready to set up Grunt for our new local project.

Getting Started with Grunt

To set up Grunt on a local project, we’ll need create two new files.

1) package.json, which contains the standard project configuration and dependencies. 2) Gruntfile.js, which contains the configuration for Grunt.

package.json

{
  "name": "GruntTest",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.3.0"
    }
}

You can see we’ve added grunt as a dependency as well as grunt-contrib-uglify which is a plugin that minifies javascript and is used in this example.

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            js: {
                files: { 'js/app.js': 'js/dev/*.js' },
                options: {
                    preserveComments: false
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-uglify');
}

This Gruntfile shows a very basic implementation that performs a single task. It includes the function called uglify and is configured to read all the files from the folder js/dev/ then minify and join them into one file at js/app.js.

Once we’ve saved both files we can install the dependencies using npm install.

That’s all!

Grunt and all of it’s dependencies are now installed.

To run this grunt uglify function type:

grunt uglify

Voila! All the files in the js/dev folder have now been minified into a single file at js/app.js

This example showed how to get started with Grunt using one simple minification operation for javascript.

There are many complex functions you can chain and automate to make your build process a lot easier.

Take a look at the Grunt Plugins page to see an extensive list of operations that can be automated.