Grunt - Getting Started

Advertisements

Previous Page
Next Page  

To make use of Grunt, you need to have Node.js installed. The installation of Node.js has been explained in the previous chapter. You can install Grunt and Grunt plugins by using Node.js package manager.

Before setting up Grunt on system, you can update the Node package manager by using the following command −

npm update -g npm

If you are using Mac or Linux, you need to use sudo word at the beginning of the command line to grant administrator access as shown below −

sudo npm update -g npm

CLI Installation

CLI stands for Command Line Interface that runs the version of Grunt which has been installed. To get started with Grunt, you need to install Grunt's command line interface (CLI) globally as shown below −

npm install -g grunt-cli

Running the above command will put the grunt command in your system path, which makes it to run from any directory. You cannot install Grunt task runner by installing grunt-cli. It allows a machine to install multiple versions of Grunt simultaneously.

Working of CLI

The CLI looks for the installed Grunt on your system by using require() system whenever Grunt is run. Using grunt-cli, you can run Grunt from any directory in your project. If you are using locally installed Grunt, then grunt-cli uses locally installed Grunt library and applies the configuration from the Grunt file.

Working with an existing and new project

If you are working with an already configured project that includes package.json and Gruntfile, then follow the simple steps as specified below −

  • Find the path to the project's root directory.
  • You can install dependencies using the npm install command.
  • Run Grunt using the grunt command.

If you are creating a new project, then include the two files package.json and Gruntfile to your project.

  • package.json − The package.json file is placed in the root directory of the project and it is used to run each listed dependency whenever you run the command npm install in the same folder.

  • Gruntfile.js − The Gruntfile.js file is used to write configuration settings for the project.

package.json

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

You can create the package.jsonin different ways as listed below −

  • You can grunt-init to create package.json file.
  • You can also create package.json file by using the npm-init command.

You can write specification as shown below −

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

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

npm install <module> --save-dev

Here, <module> represents the module to be installed locally. The above command will install the specified module and automatically add it to the devDependencies section.

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

npm install grunt --save-dev

Gruntfile

The Gruntfile.js file is a default place where your configuration settings will go for Grunt. The Grunt file includes the following parts −

  • The wrapper function
  • Project and task configuration
  • Loading Grunt plugins and tasks
  • Custom tasks

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 like name and version (pkg.name)
      pkg: grunt.file.readJSON('package.json'),

      // all of our configuration goes here

   });

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

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

Wrapper Function

In the above code, module.exports is a wrapper function where the entire configuration goes inside this function. It is a way of displaying configuration to the rest of application.

module.exports = function(grunt) {
   //do grunt-related things here
}

Project and Task Configuration

You can configure Grunt tasks, once your Grunt configuration is ready. The project configuration can be written in the grunt.initConfig() section. Inside the grunt.initConfig() function, take the configuration information from package.json file and save it to pkg. You can call your project name using pkg.name and version with pkg.version.

Loading Grunt Plugins and Tasks

Load the tasks from a specified plugin by using the grunt.loadNpmTasks method. You can install the plugin locally by using npm and it must be relative to the Gruntfile. You can load the plugin with a simple command as shown below −

grunt.task.loadNpmTasks(pluginName)

Custom Tasks

When you are running Grunt through command line, the Grunt will look for the default task. In the above code, we are using a task called uglify which can be run using gruntcommand. This is same as explicitly running grunt uglify command and you can specify the number of tasks in the array.

grunt.registerTask('default', ['uglify']);
Advertisements