How to add plugins in Gruntfile.js

Grunt is a renowned JavaScript task runner that simplifies and automates repetitive tasks for developers. Gruntfile.js acts as the configuration file for Grunt and allows them to efficiently organize and manage their project's tasks, such as code minification, file concatenation, asset bundling, testing, etc.

Grunt plugins

The Gruntfile.js supports using plugins, which enhance Grunt's capabilities and provide pre-built tasks for typical development tasks. They deliver ready-to-use tasks so that the developers can easily configure them in Gruntfile.js to automate these tasks in their project.

Plugins usually are installed via npm (Node Package Manager) and are specified as dependencies in the project's package.json file.

You can install the necessary plugins for your project here.

The grunt-contrib keyword

The plugins with the grunt-contrib keyword are a set of official Grunt plugins supported by the Grunt team.

For instance, some of the widely-used Grunt plugins with the grunt-contrib keyword include:

• grunt-contrib-concat: Concatenates multiple files into a single file.

• grunt-contrib-uglify: Minifies and compresses JavaScript files.

• grunt-contrib-sass: Compiles Sass or SCSS files into CSS.

• grunt-contrib-watch: Monitors files for changes and initiates tasks accordingly.

We will work on the installation of two essential plugins in Gruntfile.js; grunt-contrib-concat and grunt-contrib-uglify.

Installing grunt-contrib-concat

This plugin is responsible for concatenating multiple files into a single file.

You can start the project by installing the grunt-contrib-concat plugin on your system.

To learn more about task runners and Grunt installation on your system, click here.

1. Open the terminal and navigate to your project directory. You will install grunt-contrib-concat plugin by running this command on your terminal:

2. Once the plugin has been installed on your system, it is then enabled inside your Gruntfile with this line of JavaScript:

3. Now write the following command on your terminal to concatenate the multiple .js files into a single file called scripts.js in the build directory.

Once you have concatenated all the .js files into a single file, it can be optimized by compressing the file size by reducing the lines of code. This is where grunt-contrib-uglify the plugin comes in handy.

Installing grunt-contrib-uglify

This plugin is responsible for the minification and compression of .js files.

1. Open the terminal and navigate to your project directory. You will install grunt-contrib-uglify plugin by running this command on your terminal:

2. Once the plugin has been installed on your system, it is then enabled inside your Gruntfile with this line of JavaScript:

3. Now write the following command on your terminal to minify scripts.js file in the build directory.

Finally, the Gruntfile.js looks like:

By adding both of these plugins, the developers can efficiently execute the processes of file concatenation and code minification with minimum time and effort.