Hello JS Montreal!

Introduction to GruntJS

GruntJS

By Rowan Udell / @elrowan using reveal.js

http://rowanu.github.io/js-montreal-talk.gruntjs

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

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"]
    }
  }
}

In action

FIN

Questions?