How to Automate Tasks using Grunt Contrib Watch Example (Automatic CSS Minification Example using Grunt)

As we discussed earlier, using grunt, during your development process, you can execute tasks automatically in the background.

This is helpful in web and mobile UI development process where html, css and javascript are part of the tech stack.

This article covers this specific example scenario: Anytime you modify a css file in your development project, you would like grunt to automatically execute the minification routine on that css file.

The following are few high-level benefits of automating tasks during development process:

• Avoids manual repetition of same task, which saves time and effort, which in-turn keeps you focused on other important development process.
• Keeps the configured process abstract.
• Reduces the probability of errors in configured tasks

We can automate various tasks by using various plug-in with grunt, when the appropriate files are added, modified or deleted.

In this article, we’ll take a practical example of automating css minification using grunt-contrib-watch.

1. Install Grunt Contrib Watch

First, you should have “node.js” installed, and npm project configured with the “Gruntfile.js” for css minification task. Follow the steps in our Grunt install and configure article to do that.

Next, install the “grunt-contrib-watch” package. From commnad line, cd to your project folder, and execute the following command:

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

The above command will install the plugin with the respective entry done in the “package.json” for the npm project dependency listing.

2. Edit the Gruntfile.js

Edit the “Gruntfile.js” to use the plugin. This will also configure the tasks to be watched by it, and automate them on certain events.

In the “Gruntfile.js”, add a task named “watch” under “grunt.initConfig( )” method as shown below. Use proper json format:

watch: {
	scripts: {
		files: './css/*.css',
		tasks: ['default'],
		options: {
			spawn:false,
			event:['all']
		},
	},
},

The following configurations are done in the above snippet of ‘json’:

• Key ‘files’ carries the path of files to be watched.
• Key ‘tasks’ carries the task to be executed.
• Key ‘options’ carries all available configuration parameters.
• Key ‘spawn’ defines whether to seed/repeat the task continuously or not.
• Key ‘event’ carries the event on which the task is to be triggered. By default it is ‘all’. It can be set ‘changed’, ‘added’ and ‘deleted’ as well.

There are lot more parameter which you can configure here. You can get an idea about it by going through the documentation of it given its git hub repo. We are here covering only the basic required configuration for demo purpose and avoid the complexity in getting it conveyed.

3. Load the Plugin

Load the plugin using “grunt-contrib-watch( )” method.

It can be done by adding the following line in the wrapper function:

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

After this step “Gruntfile.js” will be look as shown below:

module.exports = function(grunt){
	// Initializing configuration objects
	grunt.initConfig({

		// specifying the settings for css file minification
		cssmin : {
			minify : {
				expand : true,
				cwd : './css/',
				src : [ '*.css', '!*.min.css' ],
				dest : './css/',
				ext : '.min.css'
			}
		},

		//specifying the settings for watch
		watch: {
			scripts: {
				files: './css/*.css',
				tasks: ['default'],
				options: {

					spawn:false,
					event:['all']
				},
			},
		},
	});

	// Loading the 'grunt-contrib-cssmin' package.
	grunt.loadNpmTasks('grunt-contrib-cssmin');

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

	// Registering css minification as a default task
	grunt.registerTask( 'default', [ 'cssmin' ] );
}

4. Execute Watch Task for Automation

Execute the command “grunt watch” at the command prompt from your project folder.

# grunt watch
	Running "watch" task

To see this in action, make some changes to your files and look for the log in terminal/command prompt. You will find that, as we configured, “cssmin” task is run automatically on addition, modification or deletion of the configured file in the path.

In the following example, when I changed the file css/style.css, the grunt automatically recognized it and executed the minify routine to minify the style.css routine.

	Running "watch" task
	Waiting...
	>> File "css\style.css" changed.

	Running "cssmin:minify" (cssmin) task
	File css/style.min.css created: 57.58 kB ? 49.39 kB

	Running "watch" task
	Completed in 0.091s at Fri Jul 18 2014 22:59:50
 	Waiting...