Introduction to Grunt

Last Updated : 26 Feb, 2020

Grunt is a JavaScript task runner that helps us in automating mundane and repetitive tasks like minification, compilation, unit testing, linting, etc. Grunt has hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.
The objective of this article is to get started with Grunt and to learn how to automatically minify our JavaScript files and validate them using JSHint.

Installing Grunt-CLI: First, you need to install Grunt’s command-line interface (CLI) globally so we can use it from everywhere.

$ npm install -g grunt-cli

Creating a new Grunt Project: You will need to create a new project or you can use an existing project. Let’s call it grunt_app.
Now you will need to add two files to your project: package.json and the Gruntfile.

package.json: It stores the various devDependencies and dependencies for your project as well as some metadata. You will list grunt and the Grunt plugins your project needs as devDependencies in this file.

Gruntfile: This is a configuration file for grunt. It can be named as Gruntfile.js or Gruntfile.coffee.

Run the following commands from the root directory of your project:

// Generate a package.json file
$ npm init

// Install grunt and add in package.json
$ npm install grunt --save-dev

Now create a file in your directory called Gruntfile.js and copy the following into it.

module.exports = function(grunt) {
    // Do grunt-related things in here
};

This is the “wrapper” function and all of the Grunt code must be specified inside it. It includes the project configuration and task configuration.

Now create two more files: index.html and main.js

index.html

<html> 
<body> 
    <h1>Hello World</h1> 
    <script src="main.min.js"></script> 
</body> 
</html> 

main.js

function greet() {   
    alert("Hello GeeksForGeeks");   
}   

We will use a grunt-contrib-uglify plugin to minify JavaScript files with UglifyJS.

Install grunt-contrib-uglify:

$ npm install grunt-contrib-uglify --save-dev

Update your Gruntfile as following:

module.exports = function(grunt) { 
    grunt.initConfig({ 
        pkg: grunt.file.readJSON('package.json'), 
        uglify: { 
            build: { 
                src: 'main.js', 
                dest: 'main.min.js'
            } 
        } 
    }); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
}; 

uglify

Now you can run $ grunt uglify to minify your file. You can also set default tasks for grunt which run whenever $ grunt is run.
To validate our JavaScript files we will use grunt-contrib-jshint. Install the plugin using $ npm install grunt-contrib-jshint --save-dev You can use this by running $ grunt jshint

module.exports = function(grunt) { 
    grunt.initConfig({ 
        pkg: grunt.file.readJSON('package.json'), 
        uglify: { 
            build: { 
                src: 'main.js', 
                dest: 'main.min.js'
            } 
        }, 
        jshint: { 
            options: { 
                curly: true, 
                eqeqeq: true, 
                eqnull: true, 
                browser: true, 
                globals: { 
                    jQuery: true
                }, 
            }, 
            uses_defaults: ['*.js'] 
        }, 
    }); 
    grunt.loadNpmTasks('grunt-contrib-uglify'); 
    grunt.loadNpmTasks('grunt-contrib-jshint'); 
      
    // Default task(s). 
    grunt.registerTask('default', ['uglify']); 
}; 