Grunt - Quick Guide

Grunt - Overview

What is Grunt?

Grunt is a JavaScript Task Runner which can be used as a command line tool for JavaScript objects. It is a task manager written on top of NodeJS.

Why Use Grunt?

• Grunt can perform repetitive tasks very easily, such as compilation, unit testing, minifying files, running tests, etc.
• Grunt includes built-in tasks that extend the functionality of your plugins and scripts.
• The ecosystem of Grunt is huge; you can automate anything with very less effort.

History

The first lines of source code were added to GruntJS in 2011. The Grunt v0.4 was released on February 18, 2013. The Grunt v0.4.5 was released on May 12, 2014. The stable version of Grunt is 1.0.0 rc1 which was released on February 11, 2016.

Advantages

• Using Grunt, you can perform minification, compilation, and testing of files easily.
• Grunt unifies the workflows of web developers.
• You can easily work with a new codebase using Grunt because it contains less infrastructure.
• It speeds up the development workflow and enhances the performance of projects.

Disadvantages

• Whenever npm packages are updated, you need to wait until the author of the Grunt updates it.
• Every task is designed to do a specified work. If you want to extend a specified task, then you need to use some tricks to get the work done.
• Grunt includes a large number of configuration parameters for individual plugins. Usually, Grunt configuration files are longer in length.

Grunt - Features

Grunt is a JavaScript based task runner which means it can automate repetitive tasks in a workflow and it can be used as a command line tool for JavaScript objects.
Some of the most prominent features of GruntJS are listed below −

• Grunt makes the workflow as easy as writing a setup file.
• You can automate repetitive tasks with minimum effort.
• Grunt is a popular task runner based on NodeJS. It is flexible and widely adopted.
• It has a straightforward approach which includes tasks in JS and config in JSON.
• Grunt minifies JavaScript, CSS files, testing files, compiling CSS preprocessor files (SASS, LESS), etc.
• Grunt includes built-in tasks that extend the functionality of your plugins and scripts.
• It speeds up the development workflow and enhances the performance of projects.
• You can easily work with a new codebase using Grunt because it contains less infrastructure.
• The ecosystem of Grunt is huge; you can automate anything with very less effort.
• Grunt reduces the chance of getting errors while performing repetitive tasks.
• Grunt currently has over 4000 plugins.
• It can be used in big production sites.

Grunt - Installing

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 link 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 click on My Computer.
• Select Properties.
• Next, select Advanced tab and click on Environment Variables.

• Under Environment Variables window, double click 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\nodejs\node_modules\npm. 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, click the OK button.