Agenda

• Overview
  • Usage
  • Installation
  • Setup
• Grunt syntax
  • Sample Gruntfile
• Demo Session
• Conclusion
  • Assignment

Prerequisites

• Node
• Node Package Manager (NPM)

Overview

tl;dr

in one word: automation

Usage

• JS/CSS Lint
• Uglifying
• Minifying
• Concat static files
• Hot deploy
• Dev/Test Server

Instalation

npm install -g grunt-cli
npm install grunt --save-dev

.. and that's it :)

package.json

"devDependencies": {
    "grunt": "~0.4.1",
...

Setup

Grunt syntax

All configuration code is done inside Gruntfile.js located at project root

Creating tasks

grunt.registerTask(taskName, [description, ] taskFunction)

Ex:

module.exports = function(grunt) {
  grunt.registerTask('foo', 'My "foo" task.', function(a, b) {
    grunt.log.writeln(this.name, a, b);
  });
}

$ grunt foo
  logs: "foo", undefined, undefined

$ grunt foo foo:bar
  logs: "foo", "bar", undefined

$ grunt foo:bar:baz
  logs: "foo", "bar", "baz"

Configuring tasks

grunt.initConfig({
  jshint: {
    foo: {
      src: ['app/js/a.js', 'src/aa.js']
    },
  },
  concat: {
    options: {
      src: ['src/bb.js', 'src/bbb.js'],
      dest: 'dest/b.js',
    },
  },
  uglify : require('path/to/my/settings'),
  ...

Configuring Tasks (cont)

...
watch: {
    options: {
      interrupt: true
    },
    files: [
      'app/js/**/*.js',
      // Exclude minified files
      '!app/js/min/*'
    ],
    tasks: [
      'jshint:foo', 'uglify', 'notify:uglify', 'concat',
      'notify:concat', 'jdd', 'notify:jdd'
    ]
  }
});
...

Configuring Tasks (cont)

...

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

grunt.registerTask('default', ['jshint:foo', uglify', 'concat', 'watch']);
...

Remind: packages must be declared in package.json

Conclusion

• Powerful build tool
• High level of customization
• Leads to productivity improvements

Assignment

Create a task (you are free to set its name) with following rules:

The task should FAIL if a lint rule is broken.

Submit the code on your Github account