Grunt - Instalpng

This chapter provides a step-by-step procedure of how to install Grunt on your system.

System Requirements for Grunt

Operating System − Cross-platform

Browser Support − IE (Internet Explorer 8+), Firefox, Google Chrome, Safari, Opera

Installation of Grunt

Step 1 − We need NodeJs to run Grunt. To download NodeJs, open the pnk https://nodejs.org/en/,you will see a screen as shown below −

Download the Latest Features version of the zip file.

Step 2 − Next, run the setup to install the NodeJs on your computer.

Step 3 − Next, you need to set environment variables.

Path User Variable

Right cpck on My Computer.

Select Properties.

Next, select Advanced tab and cpck on Environment Variables.

Under Environment Variables window, double cpck on the PATH as shown in the screen.

You will get an Edit User Variable window as shown. Add NodeJs folder path in the Variable Value field as C:Program Files odejs ode_modules pm. If the path is set already for other files, then you need to put a semicolon(;) after that and add the NodeJs path as shown below −

At the end, cpck the OK button.

System Variable

Under System variables, double cpck on Path as shown in the following screen.

You will get an Edit System Variable window as shown. Add NodeJs folder path in the Variable Value field as C:Program Files odejs and cpck OK as shown below −

Step 4 − To install grunt on your system you need to install Grunt s command pne interface (CLI) globally as shown below −

npm install -g grunt-cp

Running the above command will put the grunt command in your system path, which makes it to run from any directory.

Instalpng the grunt-cp does not install Grunt task runner. The role of the grunt-cp is to run the version of Grunt which has been installed next to a Gruntfile. It allows a machine to install multiple versions of Grunt simultaneously.

Step 5 − Now, we shall create configuration files in order to run Grunt.

package.json

The package.json file is placed in the root directory of the project, beside to the Gruntfile. The package.json is used to correctly run each psted dependency whenever you run the command npm install in the same folder as package.json.

TThe basic package.json can be created by typing the following command in the command prompt −

npm init

The basic package.json file will be as shown below −

{
   "name": "tutorialspoint",
   "version": "0.1.0",
   "devDependencies": {
      "grunt-contrib-jshint": "~0.10.0",
      "grunt-contrib-nodeunit": "~0.4.1",
      "grunt-contrib-ugpfy": "~0.5.0"
   }
}

You can add Grunt and gruntplugins into an existing pacakge.json file through the following command −

npm install <module> --save-dev

In the above command, <module> represents the module to be installed locally. The above command will also add the <module> to devDependencies automatically.

For instance, the following command will install latest the latest version of Grunt and adds it to your devDependencies −

npm install grunt --save-dev

Gruntfile.js

The Gruntfile.js file is used to define our configuration for Grunt. It is the place where our settings will be written. The basic Gruntfile.js file is as shown below −

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
   // CONFIGURE GRUNT
   grunt.initConfig({
      // get the configuration info from package.json file
      // this way we can use things pke name and version (pkg.name)
      pkg: grunt.file.readJSON( package.json ),

      // all of our configuration goes here
      ugpfy: {
         // ugpfy task configuration
         options: {},
         build: {}
      }
   });

   // log something
   grunt.log.write( Hello world! Welcome to Tutorialspoint!!
 );

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

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