The JavaScript Task Runner

NextGen Technology upgrade – Training @ Synerizip

The JavaScript Task Runner

Nikhil Walvekar

Synerzip Softech Pvt. Ltd.2

Grunt Getting Started Adding to new project Adding to existing project Configuring tasks


Getting started Based on npm, Node.js package manager. Grunt 0.4.x required Node.js >= 0.8.0 Supports both declarative and scripting style.

needs GruntFile.js and package.json

$>npm install –g grunt-cli


Adding to new projectFile required: package.json: used by npm

List grunt and used plugins in this. Gruntfile: Tasks are declared in this.


Package.json

Utilities to create above file npm-init grunt-init

{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-nodeunit": "~0.1.2" }}


Package.json

List grunt plugins as devDependencies

Make sure that package.json file is pushed to code repository.

…. "devDependencies": { "grunt": "~0.4.1", "grunt-contrib-jshint": "~0.1.1", "grunt-contrib-nodeunit": "~0.1.2" }….

$>npm install grunt-contrib-jshint --save-dev


Gruntfile (Gruntfile.js or Gruntfile.coffee)

module.exports = function(grunt) {

// Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: {…..}, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });

// Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify');

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


GruntfileA Gruntfile is comprised of the following parts:

The "wrapper" function Project and task configuration Loading grunt plugins and tasks Custom tasks


Gruntfile Wrapper Function

This is basic format All of grunt code must be inside this function.

module.exports = function(grunt) { // Do grunt-related things in here};


Gruntfile Project and task configuration

Most of the tasks rely on config information. <%= %> can be used to refer config properties.

// Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: {…..}, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } });


Gruntfile Loading grunt plugins and tasks

Make sure that, this plugin is listed in package.json

// Load the plugin that provides the "uglify" task.grunt.loadNpmTasks('grunt-contrib-uglify');


Gruntfile Let’s cover “Custom tasks“ in advanced Grunt


Adding to existing project Add grunt entries to existing package.json

Create “Gruntfile.js”, declare required tasks.

$>npm install grunt --save-dev$>npm install grunt-contrib-jshint --save-dev$>….


Using it Package.json and Grunfile.js updated, that’s it?

This will download and install required Grunt plugins.

$>npm install

$>grunt <TASK NAME>

$>grunt --help


Configuring tasks Specified under “grunt.initConfig” Task name and configuration name has to be same. Types:

Simple task – Has single target Multi-task – Has multiple targets

Options Files, Filters, Globbing patterns


Simple Configuration

Here is configuration for “concat” task.

module.exports = function(grunt) {

// Project configuration. grunt.initConfig({….. concat: { dist: { src: ’lib/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.js' } } });…….};


Multi-task

How to run it

If just “grunt concat” specified, it will run concat for each target.

grunt.initConfig({….. concat: { foo: {

// configuration specific in case of “foo” }, bar: {

// configuration specific in case of “bar” } } });…….};

$> grunt concat:foo


Optionsgrunt.initConfig({ concat: { options: { // Task-level options may go here, overriding task defaults. }, foo: { options: { // "foo" target options may go here, overriding task-level options. }, }, bar: { // No options specified; this target will use task-level options. }, },});


Files

File Object Format

File Array Format

Array format supports some more optionsFilter e.g ‘isFile’ or we can specify custom functionGlobbing e.g. ‘foo/**/*.js’

src: ['src/bb.js', 'src/bbb.js'], dest: 'dest/b.js'

files: { 'dest/b.js': ['src/bb.js', 'src/bbb.js'], 'dest/b1.js': ['src/bb1.js', 'src/bbb1.js'], }

files: [ {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'}, {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'}, ]


Running multiple tasks Perform certain steps in sequence

grunt.registerTask(’release', ['jshint', 'qunit', 'concat', 'uglify']);

$> grunt release


Using Uglify Add plugin grunt-contrib-uglify

uglify: { options: { // the banner is inserted at the top of the output banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n' }, dist: { files: { 'dist/<%= pkg.name %>.min.js’: ‘lib/**/*.js’ } }}


Using Require.js Add plugin grunt-contrib-requirejs

requirejs: { compile: { options: { baseUrl: "path/to/base", mainConfigFile: "path/to/config.js", out: "path/to/optimized.js" } }}


Advanced grunt Creating tasks Custom tasks


Creating task Basic task

No configuration needed Arguments are passed to this function

grunt.registerTask('foo', 'A sample task that logs stuff.', function(arg1, arg2) { if (arguments.length === 0) { grunt.log.writeln(this.name + ", no args"); } else { grunt.log.writeln(this.name + ", " + arg1 + " " + arg2); }});

$> grunt foo:bar:2


Custom tasks Multi-task

Registered function executed for each target i.e. foo, bar, baz

grunt.initConfig({ log: { foo: [1, 2, 3], bar: 'hello world', baz: false }});

grunt.registerMultiTask('log', 'Log stuff.', function() { grunt.log.writeln(this.target + ': ' + this.data);});


Custom tasks Running other tasks from custom task

grunt.task.run('bar’);


Plugins

You can write your own plugins.


Who uses Grunt?


References GruntJs.com Node.js, Ant, Grunt and other build tools Why grunt? Why not something else? From the toolbox: Grunt

http://gruntjs.com/

http://blog.millermedeiros.com/node-js-ant-grunt-and-other-build-tools/

http://benalman.com/news/2012/08/why-grunt/

http://ruudud.github.com/2012/12/22/grunt/


Questions

Documents

The JavaScript Task Runner