Automating workflow with Grunt.js

Grunt is a Javascript task runner. It automates repetitive tasks and steamline workflow. It uses Node JS and can be installed via npm (Node Package Manager)

I have been using Grunt for couple of my projects since last year — to concatenate, minify css and JavaScript files as well as compile SASS, check syntax error and run unit test.

Two important files of Grunt

Package.json
Project meta data file stores information of all dependencies. When running $npm install, it ensures correct version get installed.

{
 "name": "my-project-name",
 "version": "0.1.0",
 "devDependencies": {
   "grunt": "~0.4.5",
   "grunt-contrib-compass": "~0.10.0",
   "grunt-contrib-hologram": "~0.4.1",
   "grunt-contrib-uglify": "~0.5.0"
 }
}

Gruntfile.js
Configuration file stores detail information of each Grunt plugin

module.exports = function(grunt) {
 // Project configuration.
 grunt.initConfig({
   // Concatenate JavaScript files
   uglify: {
     all: {
          files: {
            'app/assets/js/all.min.js': ['app/assets/js/main/*.js', 'app/assets/js/common.js']
            }
          }
    },
   // Compile SASS to CSS 
  compass: {      
      dist: {                    
        options: {
          sassDir: '../sass',
          cssDir: '../css',
          outputStyle: 'compressed'
        }
    },
   // Generate pattern library  
  hologram: {
      generate: {
        options: {
          config: 'hologram_config.yml'
        }
      }
    },
   }
 });
 // Load the plugin
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-compass');
 grunt.loadNpmTasks('grunt-contrib-hologram');
 
 // Default task(s).
 grunt.registerTask('default', [
    'uglify:all',
    'compass',
    'hologram'
  ]);
};

grunt.initConfig — This is where we define configurations of Grunt plugin.

grunt.loadNpmTasks — This is where we load the Grunt plugin.

grunt.registerTask — This is where we register the Grunt task.

Setup Grunt

Make sure you have node.js and npm installed, here is a step by step tutorial. Once completed the installation, let’s start!

Install the CLI

$npm install -g grunt-cli

Install Grunt

$npm install grunt --save-dev

Install Grunt plugin

$npm install [grunt-plugin-name] --save-dev

Run Grunt

Simply type below to run all tasks at once

$grunt

You can also configure registerTask and run specific task

grunt.registerTask('compass', ['compass']);

then type below to run

$grunt compass

Execute Grunt task, you should be able to see following output display in terminal:

Running "compass:dist" (compass) task
    write /StyleGuide/css/crlib.styles.no-query.css (6.04s)
    write /StyleGuide/css/crlib.styles.css (6.859s)
  Running "compass:dev" (compass) task
  Running "hologram:generate" (hologram) task
  Custom markdown renderer Cortanamarkdownrenderer loaded.
  Build completed. (-: 
  Done, without errors.

Test it with Grunt

Jasmine is a Behavior Driven Development testing framework for JavaScript. It is also called headless testing because it doesn’t rely on browsers, DOM, or any JavaScript framework. Use Grunt to automated testing is super easy.

Install Jasmine

$npm install grunt-contrib-jasmine --save-dev

Configure the task

jasmine : {
      src : 'theme-build/js/*.js',
      options : {
        specs : 'theme-build/specs/*.js'
      }
    }

Add a spec
Create a Jasmine spec, specs/spec.js as below

describe("crlibSlidebarsr", function() {
    it("should be a constructor function", function() {
        expect(typeof window.crlibSlidebars).toBe("function");
    });
  });

Load the plugin

grunt.loadNpmTasks('grunt-contrib-jasmine');

Run the plugin

$grunt jasmine

Terminal should look like…

Running "jasmine:src" (jasmine) task
  Testing jasmine specs via PhantomJS
  >> ReferenceError: Can't find variable: angular at
  >> theme-build/js/main.js:12 
  >> theme-build/js/main.js:17 
  crlibSlidebars
    X should be a constructor function
      Expected 'undefined' to be 'function'. (1)
  1 spec in 0.005s.
  >> 1 failures

Watch it with Grunt

Grunt can watch files changes, execute tasks and then reload the page for us. Frist, let’s install Grunt watch

$npm install grunt-contrib-watch --save-dev

Configure the task

// Watch files
  watch: {
    // Watch .scss files
    sass: {
      files: ['css/sass/**/*.scss'],
      tasks: ['sass:dev'],
    },
    // Live reload files
    livereload: {
      options: { livereload: true },
      files: [
        'css/**/*.css',
        '**/*.html',
      ]
    }
  },

Load the plugin

grunt.loadNpmTasks('grunt-contrib-watch');

Run the plugin

$grunt watch

Tada! It’s done! Now Grunt will watch for changes to any .scss files, then run the task automatically.