Grunt.js crash course

slides at: slid.es/greggoforth/gruntjs-crash-course

Getting Started

Install nodejs (you'll need a version > 0.8)
Install grunt-cli (npm install -g grunt-cli)
Once the base requirements are satisfied you'll be good to begin incorporating grunt into your project.

clone the demo repo

$ hg clone https://bitbucket.org/ggoforth/dec-grunt requesting all changes
adding changesets
adding manifests
adding file changes
added 1 changesets with 736 changes to 736 files
updating to branch default
736 files updated, 0 files merged, 0 files removed, 0 files unresolved

Lets take a minute to look through the project and determine what tasks we are going to need to build this project.

Gruntifying your project

You'll need two files to get
started using Grunt...

package.json

Gruntfile.js

Creating package.json

The quick way:

$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install  --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

follow the prompts and enter the
details of your project.

Add dev dependencies to your package.json

$ vim package.json

then add to your package.json object

devDependencies {
  "grunt": "~0.4.0",
  "grunt-contrib": "~0.6.0"
}

and finally....

$ sudo npm install

the gruntfile.js

The Gruntfile is responsible for defining the tasks you want to run, and their configurations. Inside the Gruntfile you will:

Call grunt.initConfig({...}) to specify your task "targets"

Load plugins necessary for the tasks you want to run with grunt.loadNpmTasks('...')

create your gruntfile.js

(this is included in the repo you cloned earlier)

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    // Load the plugins
    grunt.loadNpmTasks('');

    // Default task(s).
    grunt.registerTask('default', []);
};

configuring tasks

Here's where we get down to the nitty gritty...what exactly do we want to do with grunt? For our demo app, we'll do the following:

jshint - makes sure we are writing good js
uglify - smaller files = better performance!
less - compile our less files into css
watch - watch for changes in files and run the tasks again!

configure jshint

Configure jshint to your specifications using the options object, and which files to lint in the files array.

jshint: {
    options: {        eqeqeq: false,         evil: true    },
    files: ['static/js/*.js', '!static/js/*.min.js']
}

configure uglify and less tasks

Uglify some files...

uglify: {
    options: {},
    targets: {
        'static/js/screen.min.js': 'static/js/screen.js' 
    }
}

and create the less task...

less: {
    dev: {
        options: {...},
        files: {
            'static/css/calc.css': 'static/less/calc.less'
        }
    }
}

Finally, set up watch

Watch will observe specified files for changes, and run any given task.

watch: {
    js: {
        files: ['static/js/*.js', '!static/js/*.min.js'],
        tasks: ['jshint', 'concat', 'uglify']
    },
    less: {
        files: 'static/less/calc.less',
        tasks: ['less']
    }
}

Register custom tasks

The last step is to register any custom tasks. Grunt will attempt to run the "default" task when no other task is specified on the command line. A custom task looks like:

grunt.registerTask('default', ['jshint', 'uglify', 'less', 'watch']);grunt.registerTask('js-build', ['jshint', 'concat', 'uglify']);

Now you can run your tasks on the command line with:

$ gruntor$ grunt js-build

GruntJS Crash Course

Short crash course on how to use grunt js to automate development tasks.

Greg Goforth

ggoforth