User:Ankit90/grunt

What is Grunt?
Grunt is an open source, task-based command line build tool used for Javascript projects. It was created by Ben Alman. While working on a web project in Javascript, a bunch of repetitive tasks are required to be performed periodically such as validating the code with JSHINT or HTMLLINT obfuscating and minifying scripts, merging snippets of code and then running tests on them.

Grunt is used to automate javascript tasks which are required to be performed repetitively. Once the configuration is done, most of the tasks can be carried out by the grunt task runner. Grunt is an open source system and allows contribrutors to create custom plugins. Grunt runs on NodeJs, which is an open-source, cross-platform runtime environment for developing server-side web applications.

Installing Grunt
Grunt and its plugins are installed and managed by npm, which is the node.js package manager, so installing Node.js is a prerequisite to run grunt on a system. To install Node.js one can visit the website the nodejs, download an installer and run it.

In order to run grunt in the terminal, the grunt command line interface(CLI) has to be downloaded globally. Without installing this, typing grunt in the terminal will result in an error. You can use the following command to install grunt CLI.

npm install -g grunt-cli

Installing grunt globally will put the grunt command in the system path, allowing it to be run from any directory inside the machine. Once it installs all the dependencies, you can start using Grunt.

Using Grunt
The general way of using grunt is by adding a package.json file and a gruntfile to the root level of the project. The package.json file is used by node package manager to store the metadata for the projects which are published as npm modules. It should only contain JSON(Javascript Object Notation).

The npm init command is used to create a basic package.json file. This will prompt the user to enter certain aspects of the project such as name, description, version etc. Once done with that, it asks the user to verify if all the information in the package.json is correct. Upon a confirmation from the user it creates the package.json. A typical package.json looks like this:

{   "name": "gruntProject", "version": "0.0.0", "description": "Project-description", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },   "author": "", "license": "ISC" }

To install grunt in the package, the following command can be used:

npm install -S grunt.

This adds a key "dependencies" in the package.json with an object containing "grunt" and its version as the key value pair. It also creates a node Modules folder which contains the dependencies(grunt) for the project.

"dependencies": { "grunt": "^0.4.5" }

Gruntfile
A gruntfile is comprised of the following parts:
 * 1) The "wrapper function"
 * 2) Project and task configuration
 * 3) Loading grunt plugins and task
 * 4) Custom tasks

Whenever you run grunt, it basically runs the Gruntfile. You can register tasks in your Gruntfile like so:

module.exports = function(grunt) { grunt.registerTask('run',function {     console.log('Grunt is running');    }); }

So, if we type grunt run in the terminal at the root level of the project, it will execute the corresponding task and log "Grunt is running" on the terminal. So, this is how grunt runs at the basic level. We can define complex tasks using the plugins grunt has to offer.

Grunt Plugins
Grunt has many custom plugins created by grunt contributors. These plugins, the ones added by the contributors, are reliable and can be entrusted for usage. They have the keyword 'contrib' in their name. The easiest way to add grunt and its plugins to an existing package.json is by using the command:

npm install --save-dev

For example, if we want to concatenate multiple javascript files we can enter the following command in the terminal:

npm install grunt-contrib-concat --save-dev

This will result in a new entry getting added in the "devDependencies" in package.json. The gruntfile can be modified to use the plugin.

module.exports = function(grunt) { grunt.initConfig({     concat: {        js : {          src : ['path/to/file1.js', 'path/to/file2.js'],          dest : 'path/to/destination.js'        }      }    }); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['concat']); }

If the terminal is opened, navigated to the root of this directory and grunt is typed in, the grunt task runner will concatenate the 2 files specified in the src and will generate an output file specified in the dest.

Upon lookind at the gruntfile:

1. The "wrapper" function function can be observed, every gruntfile uses this basic format for the wrapper function and the entire grunt code should be enclosed inside this function.

module.exports = function(grunt) { // Grunt code enwrapped here } 2. Project and task configuration: This is the configuration data defined in an object passed to the grunt.initConfig method.

grunt.initConfig({   concat: {      js : {        src : ['path/to/file1.js', 'path/to/file2.js'],        dest : 'path/to/destination.js'      }    }  }); 3. Loading Grunt plugins and tasks: This is how grunt plugins are loaded and used inside a gruntfile. As long as they are in the package.json as a dependency and has been installed via npm.

grunt.loadNpmTasks('grunt-contrib-concat'); 4. Custom tasks: If the project requires some tasks which are not provided by grunt plugins, custom tasks can be defined inside the gruntfile.

grunt.registerTask('default', 'Task Description.', function {   grunt.log.writeln('Currently running a "default custom" task.');  });