Grunt.JS: A JavaScript Task Runner
Tags: node, grunt, javascript, tutorial
Published: 2020-05-04 22:16:12

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**](https://gruntjs.com) and [**Gulp**](https://gulpjs.com/). 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 &rarr; 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
```sh
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. 

```sh
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
 
```js
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

```sh
npx grunt <task name>
```

![](https://i.ibb.co/5rVWjx4/image.png)


## 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](https://gruntjs.com/plugins)

In this, I will show you the magic [Contrib Concat](https://www.npmjs.com/package/grunt-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
```sh
npm i -D grunt-contrib-concat
```

And now loading in Gruntfile (extending old Gruntfile)

```js
// 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

![](https://i.ibb.co/Jctydt4/image.png)

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](https://twitter.com/tbhaxor)
+ [Instagram](https://instagram.com/_tbhaxor_)
+ [Facebook](https://fb.com/tbhaxor)
+ [Email](mailto:tbhaxor@gmail.com)