.js

Vishal Telangre - twitter/@suruwat

Automation

- task runner
- runs on command line

- existing -- make, rake, ant, maven, etc.

Dependencies - node.js & npm

Great documentation, variety of plugins (~4k)

http://gruntjs.com/plugins

- lint, minify, run tests, run server, watch changes, update browser (live reload)...

 

- Also -- image resizing, sftp, etc.

 

- Support for less/sass, coffee, jade, mustache, etc.

Includes:
  - package.json
  - Gruntfile.js

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

Arggh...

 

Sounds good, but is it easy -- huh?

- Running test cases with Git-hooks plugin before user commit changes:

 

  githooks: {
    all: {
        'pre-commit': 'test'
    }
  }

Gruntfile.js

 

1. Configuring tasks
2. Loading plugins & tasks
3. Defining task aliases and custom tasks

module.exports = function(grunt) {
  grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  // ...
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  // ...

  grunt.registerTask('task1', 'desc', [taksList]);
  grunt.registerTask('task2', 'desc', function(){
    // ...
  });
  // ...
  grunt.registerTask('default', ['task1', 'task2'])
}

E.g. Using coffee plugin

- Install

 

npm install grunt-contrib-coffee --save-dev

E.g. Using coffee plugin

- Register plugin

 

grunt.loadNpmTasks('grunt-contrib-coffee');

E.g. Using coffee plugin

- Configure

 

grunt.initConfig({
  // ...
  coffee: {
    options: { join: true },
    files: {
      'build/js/app.js': ['scripts/*.coffee']
    }
  },
  // ...
});

- Run

 

grunt coffee

E.g. Using coffee plugin

Getting started tutorial:

 

http://gruntjs.com/getting-started

Questions?

Grunt.js

By Vishal Telangre

Grunt.js

  • 638