GRUNT

Grunt is a Javascript based task runner.We can automate tasks using Grunt. Some of the tasksthat we can automate are

Sass (CSS pre­processor) JSHint (JavaScript code quality) ImageMin (Image minification) HTMLMin (HTML minification) Concatenating files Compress your CSS and minify your JavaScript

Grunt uses Node.js and Node's package manager system (NPM) to handle the installation ofGrunt tasks.

Install

For working on Grunt, we need following to be installed

1) Node.js2) NPM3) Grunt CLI (Command Line Interface)

Installation commands

npm install ­g grunt­clinpm install ­g grunt­init

package.json file is needed to implement the grunt tasks. package.json can be written manuallyor use “npm init” command in the project folder which generates the package.json automaticallybut we need to know the proper formatting tips to be given for values of package.json.

Install dependencies for required tasks using commands like

npm install grunt­contrib­watch ­­save­dev npm install grunt­contrib­jshint ­­save­dev ­ For JS error reporting npm install grunt­contrib­uglify ­­save­dev npm install grunt­contrib­requirejs ­­save­dev npm install grunt­contrib­sass ­­save­dev npm install grunt­contrib­imagemin ­­save­dev npm install grunt­contrib­htmlmin ­­save­dev

The ­­save­dev flag updates package.json file automatically to include the installed dependency

we can see node_modules folder after completion of above dependencies.Once dependenciesare installed, we have to write Gruntfile.js for handling those dependencies

module.exports = function (grunt) grunt.initConfig( //initConfig a grunt object // our Grunt task settings

pkg: grunt.file.readJSON('package.json'),

concat: // Configuration for concatinating files goes here.

// Where we tell Grunt we plan to use this plug­in. grunt.loadNpmTasks('grunt­contrib­concat');

// Where we tell Grunt what to do when we type "grunt" into the terminal.grunt.registerTask('default', ['concat']);

);;

After having Gruntfile.js in place with having required dependencies go to terminal and run ‘grunt’command.

To keep an eye out for changes to specific places and, when changes happen in those places,run specific tasks can be done through the grunt­contrib­watch plugin.

References

http://gruntjs.com/https://github.com/chriscoyier/My­Grunt­Boilerplate/blob/master/Gruntfile.jshttps://github.com/Integralist/Grunt­Boilerplate/blob/master/Gruntfile.js