Grunt - useful pig at your service.

As web developer you need to be efficient. You need automated work that can be. For instance: run tests, copy, splice, compile, minify files, deploy apps to remote servers and more and more. All these boring work is appropriate to leave for the Grunt.

The one dependencies is NodeJS, but you don't need understand anything about NodeJS. Grunt is here for any web projects.

Grunt has a useful documentation. All examples below are only quick samples.

Common and useful plugin

• Concat - Combine Files.
• Qunit, NodeUnit - Testing frameworks.
• JSHint, HTMLHint - Helps to detect errors and potential problems in code.
• UglifyJS, CSSmin, HTMLmin - Minify files.
• Watch - Run tasks whenever watched files change.

There are thousand of others plugins on Grunt plugin repository. The configuration parameters of plugins you can be found in the corresponding web page.

Do not worry, it's just your JavaScript

You can use your variables, methods. It is your friend JavaScript.

srcFiles: ['src/namespace.js', 'src/templates/templates.js'],

concat : {

 dist: {

  files: {

   './build/<%= pkg.name %>.js': "<%= srcFiles %>",

   './example/js/<%= pkg.name %>.js': "<%= srcFiles %>"

   },

 },      

}

Read from config

module.exports = function(grunt) {

grunt.initConfig({ bar: { foo: 42 } }); grunt.registerTask('myTask', function() { var bar = grunt.config.get('bar'); //nothing here... }); };

Task aliasing

grunt.registerTask('deploy', ['build', 'test', 'upload']);

Custom task

Create custom task is very straightforward. It is common function.

module.exports = function(grunt) {

     grunt.registerTask('myTask', function() {

       //nothing here...   

     });

};

Runtime options

module.exports = function(grunt) {

          console.log('bar is: ' + grunt.option('bar'));

          grunt.registerTask('myTask', function() {

          //nothing here...

     });

};

$ grunt myTask --bar

bar is: true

Running "myTask" task

$ grunt myTask --bar=42

bar is: 42

Running "myTask" task

Multi tasks

grunt.initConfig({

     compile: {

          target1: {

               source: './src/app.js',

               dest: '../build/app.js'

          },

          target2: {

               source: './src/main.js',

               dest: '../build/main.js'

          }

     }

});

$ grunt compile:target1

$ grunt compile:target2

Multiple sets of source files

target1: {

     files: [

          { src: 'src/{a,b,c}.js', dest: 'dest/abc.js' },

          { src: 'src/{x,y,z}.js', dest: 'dest/def.js' } 

     ]

}

Environment specific tasks

var env = grunt.option('env') || 'dev';

if(env === 'prod') {

grunt.registerTask('scripts', ['coffee', 'uglify']);

grunt.registerTask('styles', ['stylus', 'cssmin']);

grunt.registerTask('views', ['jade', 'htmlmin']);

} else {

grunt.registerTask('scripts', ['coffee']);

grunt.registerTask('styles', ['stylus']);

grunt.registerTask('views', ['jade']);

}

grunt.registerTask('default', ['scripts','styles','views']);

Read external file

credentials: grunt.file.readJSON('credentials.json'), ... username: '<%= credentials.username %>', password: '<%= credentials.password %>',

Utils

if(grunt.file.exists('.jshintrc')) { grunt.task.run('jshint'); }