Grunt.JS: A JavaScript Task Runner

Before heading towards Grunt, you should be familiar with the concept of the task runner and its role in the development lifecycle.

A task runner is a tool used to automate tasks in the development process. The task can be used to perform a wide variety of operations such as the compilation of TypeScript files or the compression of JavaScript files. It is basically used to automate time-wasting tasks and allows developers to focus on development.

Some of the trivial task that can be automated by a task runner

• Compiling SCSS to CSS
• Fixing CSS Rules
• Minifying JS
• Concating Files

There are two popular task runner, Grunt and Gulp. The main difference between Gulp and Grunt lies in how they deal with their automation tasks on the inside. Gulp uses Node streams while Grunt uses temp files. Grunt handles this using intermediary files which are disk I/O operations. The performance of node streams is far better than I/O operation, but with this feature, gulp comes with a steeper learning curve. To read more, follow this url → https://www.hongkiat.com/blog/gulp-vs-grunt/

In this, I will teach you how to install and use grunt. Grunt has so many plugins to minimize your development task. So before moving forward, you should have the grunt package installed.

Setting up Grunt

mkdir grunt-tutorial && cd grunt-tutorial
npm init -y                # initializing node project
npm i -D grunt grunt-cli   # installing grunt package and grunt-cli

Grunt CLI depends on Gruntfile.js for its configuration. So let's create this file.

cat << EOF > Gruntfile.js
module.exports = function (grunt) {

}
EOF

What you can do with Gruntfile

• Configure your tasks and tell plugins where to find the files
• Load plugins into the file (e.g. uglify)
• Register task which needs to be ran

Writing your first task

module.exports = function (grunt) {

    // way to register task
    grunt.registerTask("begin", "Greeting The Developer", () => {
        console.log("Starting the task runner");
    });

    grunt.registerTask("end", "Goodbye The Developer", () => {
        console.log("Ending the task runner");
    });

    // way to register task to run all other pre register tasks and which are listed as the second parameter
    grunt.registerTask("all", ["begin", "end"]);
}

Explanations

• .initConfig: It is a function that accepts an object. It is the medium to pass in options to plugins and path to locate files and more
• .loadNpmTasks: To load tasks, (that I will show in a moment)
• .registerTask: Its a function used to register tasks. The first argument is the unique task name and the second argument is a callback to perform some actions

Calling Tasks
The grunt task is called by registering a task name and then calling it by executing

npx grunt <task name>

Installing and Using Grunt Plugins

Now comes the main part where you will see grunt extending plugins to make your work easier

To visit and see all plugins, open plugin page

In this, I will show you the magic Contrib Concat plugin by Grunt Team. It allows you to concatenate files.

NOTE: The plugins are loaded in grunt using grunt.loadNpmTasks(<plugin-name>);

Installing plugin

npm i -D grunt-contrib-concat

And now loading in Gruntfile (extending old Gruntfile)

// Gruntfile.js
module.exports = function(grunt) {

    // grunt configurations
    grunt.initConfig({
        // the plugin
        concat: { 
            // this is a task for css files
            css: { 
                // defining the list of files, it supports glob (this may change according to your file structure)
                src: [ "styles/*.css" ],
                // defines the build path
                dest: "css/style.bundled.css" 
            }
        }
    });

    // loading tasks
    grunt.loadNpmTasks("grunt-contrib-concat");

    // way to register task
    grunt.registerTask("begin", "Greeting The Developer", () => {
        console.log("Starting the task runner");
    });

    grunt.registerTask("end", "Goodbye The Developer", () => {
        console.log("Ending the task runner");
    });

    // way to register task to run all other pre register tasks and which are listed as the second parameter
    grunt.registerTask("all", ["begin", "concat:css", "end"]);
}

Grunt in action

One more thing, if you register a task with name default, then you can simply run npx grunt to execute that task.

Connect with me

• Twitter
• Instagram
• Facebook
• Email