Writing a Simple Grunt Task using GruntJS

On February 28, 2013, in Javascript, by Anuj Gakhar

In this post, I will be demonstrating how to write a simple Grunt Task that would concatenate and minify your Javascript and CSS source files. GruntJS is a Javascript Task Runner that automates certain tasks and saves a lot of time. There are hundreds of plugins available and the community is growing quite impressively. The latest version of GruntJS is 0.4 and everything below is only valid for this version. If you already have a project with v0.3, here is a document for the migration to v0.4

Installation

GruntJS is installed via NPM and I will be assuming that you already have npm installed. There are detailed instructions available here but it really is as simple as this.

npm install -g grunt-cli

This will install Grunt as a global module so it can be accessed from everywhere in your system.

Create a Project

A typical setup will involve creating 2 files in your project. package.json and Gruntfile.js. So, create a folder in your webroot somewhere and write a package.json file. A very simple file with the basic information would look like this :-

{
  "name": "Grunt Sample Project",
  "version": "1.0.0",
  "title": "Sample Project",
  "homepage": "http://gruntjs.com"
}

Install Required Modules

For this task, we are only going to be requiring to concatenate and minify the source files, so we will only be installing those modules. Run the following commands in your project folder :-

npm install grunt --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-cssmin --save-dev

These commands will install the 4 modules (grunt, grunt-contrib-concat, grunt-contrib-uglify, grunt-contrib-cssmin) into your project’s folder and the “–save-dev” flag will update your package.json file and add these dependencies in it. After the modules are installed, your package.json would look like this :-

{
  "name": "Grunt Sample Project",
  "version": "1.0.0",
  "title": "Sample Project",
  "homepage": "http://gruntjs.com",
  "devDependencies": {
    "grunt": "~0.4.0",
    "grunt-contrib-concat": "~0.1.3",
    "grunt-contrib-uglify": "~0.1.2",
    "grunt-contrib-cssmin": "~0.4.1"
  }
}

For the requirements of this post, we only need the above 4 plugins, but if you are interested, here is a complete list of available plugins.

Write the Gruntfile

Once the above steps are done, you are now ready to write your Gruntfile. A Gruntfile’s syntax and specs are all well documented here so I won’t be going into the details of that. The following Gruntfile is based on the assumption that you have your Javascript source files in a /lib/src/js folder and your CSS source files in a /lib/src/css folder and you’d want to write the final minified scripts into the /lib/build folder. The final directory structure may look like this :-

Screen Shot 2013-02-28 at 12.29.20

With that in mind, here is a simple Gruntfile that when run will concatenate your JS and CSS source files and minify them and write the final files in a folder of your choice :-

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    
    // Define our source and build folders
    js_src_path: 'lib/src/js',
    js_build_path: "lib/build/js",
    css_src_path: "lib/src/css",
    css_build_path: "lib/build/css",

    // Grunt Tasks
    concat: {
      options:{
        separator: ';'
      },
      js: {
        src: ['<%= js_src_path %>/*.js'],
        dest: '<%= js_build_path %>/app.js'
      },
      css:{
        src: ['<%= css_src_path %>/*.css'],
        dest: '<%= css_build_path %>/app.css'    
      }
    },
    uglify: {
      options:{
        mangle: true,
        banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version + "\\n" %>' +
        '* <%= grunt.template.today("yyyy-mm-dd") + "\\n" %>' +
        '* <%= pkg.homepage + "\\n" %>' + 
        '* Copyright (c) <%= grunt.template.today("yyyy") %> - <%= pkg.title %> */ <%= "\\n" %>'
      },
      js: {
        src: '<%= concat.js.dest %>',
        dest:'<%= js_build_path %>/app.min.js'
      }
    },
    cssmin: {
      css: {
        src: '<%= concat.css.dest %>',
        dest:'<%= css_build_path %>/app.min.css'
      }
    }
  });
  
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');

  // Default task.
  grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
};

I have kept the final file names to be app.min.js and app.min.css but feel free to change that to whatever you seem appropriate. You can also choose to write your Gruntfile in Coffeescript if you like. It would just be called Gruntfile.coffee in that case.

Run the Grunt Task

There is a default task registered in the GruntFile which runs the 3 tasks in the order they are specified in, which is “concat”, “uglify” and then “cssmin”. So if you were to do all those steps in that sequence, all you need to do is go to your project folder and run the command “grunt” :-

grunt

And this will run all those tasks and write the minified files in your build folders. However, you can also choose to run just one or more of these tasks on their own. If you were to run just the “concat” task e.g., you would use this command

 grunt concat

And that will only concatenate the files and nothing else.

And that’s it for this post. Hope it is useful.

Tagged with:  

3 Responses to Writing a Simple Grunt Task using GruntJS

  1. Neil says:

    Excellent article, been trying to get just the concat working from the Grunt docs, to get all this going in one go is great, thank you.

  2. Er kk says:

    Excellent article :)

Leave a Reply

© 2011 Anuj Gakhar
%d bloggers like this: