Hello JS Montreal! – What is GruntJS? – Why?

View Github Repository Open presentation in a new window

rowanu

See all presentation from rowanu

Hello JS Montreal! – What is GruntJS? – Why?

0 0

js-montreal-talk.gruntjs

Introduction to GruntJS for JS Montreal

On Github rowanu / js-montreal-talk.gruntjs

Hello JS Montreal!

Introduction to GruntJS

By Rowan Udell / @elrowan using reveal.js

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

This talk is all about getting you up and running with GruntJS asap. I took a while to sit down and learn GruntJS, and I'm pretty happy I did. The plugin ecosystem in particular has the potential to save you lots of time on a daily basis.

What is GruntJS?

A Script Runner

It's like a build tool, but different.

Think make, rake, jake, cake, etc.

Script runner vs build tool.

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

Lots of low-level Knowledge can be encapsulated.

Plugins

Don't re-invent the wheel

Seriously. Stop it. Leave that yak alone.

Fantastic range of plugins for most common tasks.

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

In action

FIN

Questions?