Grunt

The JavaScript task runner

Typical uses for a task runner

• Minifying HTML/CSS/JS files
• Code validation
• Transpiling (transforming code written in another language to JS)
• Running tests

Task runner?

• Task runners automate repetitive development tasks

Grunt?

• Grunt is a Javascript task runner
• Grunt is built and configured using Javascript, so it fits smoothly in JS development flows
• Grunt is a good option for a task runner because of its large ecosystem of plugins (~3400 plugins)

Installing grunt

• Installing Grunt is easily done using npm
• Grunt installation consists of two parts

npm install -g grunt-cli

Grunt-CLI

Grunt-CLI allows you to run Grunt commmand in your command line

npm install grunt --save-dev

Grunt

Grunt is installed locally instead of globally (like Grunt-CLI)

Configuring grunt

• Configuration of Grunt is done through Gruntfile
• Gruntfile is Javascript, so configuring it is very simple

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
};

Empty gruntfile

Complete gruntfile

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jshint: {
      files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint']
    }
  });

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

  grunt.registerTask('test', ['jshint']);
  grunt.registerTask('default', ['jshint']);

};

Commonly used grunt plugins

• grunt-contrib-uglify, minify files
• grunt-contrib-jshint, automate your code validation
• grunt-contrib-watch, watch files and run grunt automatically when specific criteria is matched
• ..and many more at http://gruntjs.com/plugins

Plugins

• Grunt itself does not "do" anything
• All grunt tasks are separated into plugins
• Plugins are installed through npm

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