Grunt - How to run predefined tasks under watch

In this tutorial we will learn to run predefined tasks under Grunt watch.

In previous tutorials we have learned to create custom tasks, and concatenate files, and minify javascript and css files using plugins. In this tutorial we will be using Grunt watch plugin to run predefined tasks.

The idea of watch is to run tasks whenever watched file pattern are added, deleted or changed.

Project structure

Let us assume that we have the following project structure. The name of the project is grunt-project.

So, inside the css folder we have style1.css and style2.css files.

Let's say we want to minify files inside the css folder and create style.min.css file in the dist folder. And we want to do this whenever a new stylesheet file is added, or existing stylesheet file is edited or deleted.

Task that we will write

We will be writing the following code in Gruntfile.js file.

module.exports = function(grunt) {

	//project configurations
	grunt.initConfig({

		//this is for minifying css files
		cssmin : {
			target : {
				src : ["css/*.css"],
				dest : "dist/style.min.css"
			}
		},

		//this is the watch
		watch : {
			scripts : {
				files : ["css/*.css"],
				tasks : ["cssmin"]
			}
		}

	});

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

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

};

So, let's get started.

Install grunt-contrib-watch

Run the following command in the terminal to install watch plugin in the project.

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

Creating Grunt Task

Open Gruntfile.js file and type the following.

module.exports = function(grunt) {
}

It is a function that is used in every Grunt file and its plugins.

Creating project configuration for Grunt

Now, write the following code inside the function.

grunt.initConfig({
});

We are passing an object to the initConfig method of Grunt. This object will hold all our configuration.

Minify CSS

Now, inside the object set the cssmin property to the following value.

cssmin : {
	target : {
		src : ["css/*.css"],
		dest : "dist/style.min.css"
	}
}

In the above code we are adding the target property. We are saying to Grunt that our source src files are inside the css folder and are .css files. And we want the minified file to have a name style.min.css and we want it inside the dist folder.

watch

Now, inside the object set the watch property to the following value.

watch : {
	scripts : {
		files : ["css/*.css"],
		tasks : ["cssmin"]
	}
}

In the above code we are adding the scripts property. And we are watching all .css files that are inside the css folder. And whenever a new stylesheet file is added or changed or deleted we want the cssmin task to get executed.

Load grunt-contrib-cssmin plugin

To load the cssmin plugin write the following code.

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

Load grunt-contrib-watch plugin

To load the watch plugin write the following code.

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

Create default task

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

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

Run task

Finally to run the task type the grunt command in the terminal and it will start watching the css folder.

Output

YUSUF-MacBook-Pro:grunt-project yusufshakeel$ grunt
Running "watch" task
Waiting...
>> File "css/style1.css" changed.
Running "cssmin:target" (cssmin) task
>> 1 file created. 207 B → 122 B

Done.
Completed in 0.808s at Sun Mar 05 2017 18:05:55 GMT+0530 (IST) - Waiting...
>> File "css/style3.css" added.
Running "cssmin:target" (cssmin) task
>> 1 file created. 207 B → 122 B

Done.
Completed in 0.897s at Sun Mar 05 2017 18:08:08 GMT+0530 (IST) - Waiting...
>> File "css/style3.css" changed.
Running "cssmin:target" (cssmin) task
>> 1 file created. 228 B → 122 B

Done.
Completed in 0.700s at Sun Mar 05 2017 18:08:32 GMT+0530 (IST) - Waiting...
^C

To stop the watch type Ctrl+C in the terminal.

After the watch ends we will get some minified css content.

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