Grunt - Using Grunt plugin to concatenate files

In this tutorial we will learn to use Grunt plugin in our project to concatenate files.

In our previous tutorial Creating Tasks we learned how to create basic tasks in the Gruntfile.js file.

Project structure

So, we have our grunt-project folder from the Getting Started tutorial. Inside it we have the package.json and Gruntfile.js files.

Let us assume that our grunt-project folder has the following structure.

Inside the js folder we have two JavaScript files - happy.js and simley.js containing the following code.

//inside happy.js file
console.log("Happy");

//inside smiley.js file
console.log("Smiley");

We will be concatenating the two js files into one script.js file.

In this tutorial we will be learning to concatenate JavaScript files using grunt-contrib-concat which is a Grunt plugin.

Task that we will write

Following is the concat task that we are going to create in this tutorial.

module.exports = function(grunt) {

	//project configurations
	grunt.initConfig({

		concat : {
			dist : {
				src : ["js/*.js"],
				dest : "dist/script.js"
			}
		}

	});

	//load concat plugin
	grunt.loadNpmTasks('grunt-contrib-concat');

	//create default task
	grunt.registerTask("default", ["concat"]);

};

So, let's get started.

Install grunt-contrib-concat

Open the project folder grunt-project in terminal and run the following command.

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

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ npm install grunt-contrib-concat --save-dev
grunt-project@1.0.0 /Users/yusufshakeel/Documents/yusuf-dev/grunt-project
└─┬ grunt-contrib-concat@1.0.1 
  └── source-map@0.5.6 

YUSUF-MacBook-Pro:grunt-project yusufshakeel$

So, we have installed Grunt Contrib Concat version 1.0.1 in our project.

Before we start using the plugin we have to configure task for Grunt. We do this by creating task inside the Gruntfile.js file which we created in our project folder in the Getting Started tutorial.

Creating Grunt Task

Open Gruntfile.js file in your favourite text editor or IDE and type the following.

module.exports = function(grunt) {
}

In the above code we have created a function. Every Grunt file and its plugins uses this basic format.

Creating project configuration for Grunt

Now, inside the function that we create above write the following code.

grunt.initConfig({
	
});

In the above code we are passing an object to initConfig method of Grunt. All our configuration for grunt will go inside this object.

concat

Inside the object set the concat property to the following value.

concat : {
	dist : {
		src : ["js/*.js"],
		dest : "dist/script.js"
	}
}

The above code will take all the JavaScript files inside the js folder and will concate them and the resultant file will be placed inside the dist folder and will be saved as script.js file.

Load grunt-contrib-concat plugin

Now, load the concat plugin by writing the following code.

grunt.loadNpmTasks('grunt-contrib-concat');

Create default task

Now, at the end we will create a default task for the Grunt by typing the following code.

grunt.registerTask("default", ["concat"]);

Running Grunt

Now, in the terminal type the grunt command to concat the files.

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt
Running "concat:dist" (concat) task

Done.
YUSUF-MacBook-Pro:grunt-project yusufshakeel$

After running the above command we will have the dist folder created and the concatenated content inside the script.js file.

That's all for this tutorial. Have fun coding.