Getting up and running with Grunt

Installing Node.js and updating npm

NPM (node package manager) is used to install and manage Grunt and Grunt plugins (among other things). So firstly you'll need to make sure Node.js is installed. From Grunt 0.4x onwards you'll need a stable version of Node.js >=0.80. Odd version numbers are considered unstable development versions.

To ensure npm is up to date run

npm update -g npm

Next up you'll need to install the Grunt CLI (Command Line Interface)

npm install -g grunt-cli

This puts the "grunt" command in your system path and allows it to be run from any directory. Each time Grunt is run, it looks for a locally installed Grunt using Nodes require(). Now Grunt can be run from any subfolder in a project. If a locally installed Grunt is found, the CLI loads the local installation of the Grunt library, applies the configuration from the gruntfile and executes any tasks requested to run.

This is useful as you may want to run certain development tasks in a specific subfolder, but have another set of production tasks configured in the root directory.

Setting up Grunt

A typical grunt setup will require two files:

package.json

• This is used by npm to store metadata for projects published as npm modules.
• It belongs in the root directory of the project along with the Gruntfile.
• Grunt and Grunt plugins your project needs are listed as devDependencies in this file.
• There are a few ways you can create a package.json file. npm init will create a basic package.json file
• Or you can copy the below template with some recommended base modules and follow these specifications if you need to add more.
• Running npm install in the same directory as the package.json file will install all the module dependencies listed in package.json

{
  "name": "project-name",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-connect": "^0.11.2",
    "grunt-contrib-copy": "^0.6.0",
    "grunt-contrib-imagemin": "~0.5.0",
    "grunt-contrib-uglify": "~0.3.2",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-sass": "^1.0.0",
    "grunt-svgmin": "^2.0.1"
  }
}

Gruntfile

This is the config file for your tasks enabled by installed plugins. It is comprised of the following parts:

• The grunt wrapper function
• Project and task configuration
• Loading the Grunt plugins and tasks
• Any custom tasks you may want to configure

Configuring your Gruntfile

1. The wrapper function

module.exports = function(grunt) {
  //everything goes in here
};

2. Project and task configuration

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    //CONCATENATE JAVASCRIPT FILES
    concat: {
      options: {
        sourceMap: true
      },
      dist: {
        src: [
        'your/path/here/*.js',
        '!but/not/this/tracking.js'
        ],
        dest: 'your/path/here/app.js',
      }
    }

});

3. Load plugins and tasks

//LOAD THE TASK THAT ALLOWS FOR CONCATENATION
grunt.loadNpmTasks('grunt-contrib-concat');

4. Create custom tasks

grunt.registerTask('default',['concat']);

Below is an example of a gruntfile with some tasks configured

//###### WRAPPER FUNCTION
module.exports = function(grunt) {

  var LIVERELOAD_PORT = 35729;

  //###### PROJECT AND TASK CONFIGURATION
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    //CONCATENATE JAVASCRIPT FILES
    concat: {
      options: {
        sourceMap: true
      },
      dist: {
        src: [
        'your/path/here/*.js',
        '!but/not/this/tracking.js'
        ],
        dest: 'your/path/here/app.js',
      }
    },

    //CONFIGURE SASS OPTIONS
    sass: {
      options: {
        sourceMap: true,
        outputStyle: 'compressed',
      },
      dist: {
        files: {
          'your/path/style.css' : 'your/path/style.scss'
        }
      }
    },

    //MINIFY JAVASCRIPT FILES
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
        sourceMap: true
      },
      build: {
        src: 'your/path/here/app.js',
        dest: 'your/path/here/app.min.js'
      }
    },

    //START A STATIC WEB SERVER
    connect: {
      server: {
        options: {
          port: 8080,
          hostname: 'localhost',
          base: '.',
          livereload: LIVERELOAD_PORT
        }
      }
    },

    //WATCH FOR CHANGES IN CERTAIN FILES
    watch: {
      css: {
        files: '**/*.scss',
        tasks: ['sass']
      },
      options: {
         livereload: LIVERELOAD_PORT,
      },
      scripts: {
        files: ['Content/Scripts/*.js'],
        tasks: ['concat', 'uglify'],
        options: {
          spawn: false,
        }
      },
      html: {
        files: ['*.html','**/*.css'],
        options: {
             livereload: LIVERELOAD_PORT
        }
      }
    }

  });

  //LOAD GRUNT PLUGINS
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
  grunt.loadNpmTasks('grunt-svgmin');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-watch');

  //REGISTER CUSTOM GRUNT TASKS
  grunt.registerTask('default',['concat', 'sass', 'connect', 'watch']);
  grunt.registerTask('production',['concat', 'uglify', 'imagemin', 'svgmin']);
  grunt.registerTask('images',['imagemin']);
};

5.) Run grunt to run the default grunt tasks