Introduction to Grunt

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


main.js

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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');
};

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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']);
};

chevron_right


jshint

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.