What is GruntJS?

A Script Runner

It's like a build tool, but different.

Think make, rake, jake, cake, etc.

Why?

YOU are the weakest link

And I for one welcome our new robot overlords

Automation

• Will make you a Happy Developer™
• A Happy Developer™ is a Productive Developer

Knowledge Encapsulation

Outcome Vs Process

Why GruntJS?

High-level

More of what the *ake tools give you

Plugins

Don't re-invent the wheel

Seriously. Stop it.
Leave that yak alone.

Sharing is Caring

Should be as easy as "npm install"

CoffeeScript*

It's just JavaScript

*I love JavaScript

Basics

grunt-cli

Installed system-wide.
Enables grunt command to be versioned.

package.json

Nothing special here.

Gruntfile

JavaScript or CoffeeScript

• The "wrapper" function
• Project and task configuration
• Load plugins and define tasks
• Custom tasks

A Quick Example

Setup

• npm install -g grunt-cli
• git init demo
• cd demo
• npm init
• npm install grunt --save-dev
• mkdir src

Gruntfile

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

JSLint

• npm install grunt-jslint --save-dev

Gruntfile

jslint: {
  files: ["src/**/*.js"],
  directives: {
    devel: true
  }
}
            

Watch

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

Gruntfile

watch: {
  jslint: {
    files: ["src/**/*.js"],
    tasks: ["jslint"],
    options: {
      interrupt: true
    }
  }
}
            

Uglify

• npm install grunt-contrib-uglify --save-dev

Gruntfile

uglify: {
  build: {
    files: {
      "js/index.min.js": ["src/index.js"]
    }
  }
}