Livereload with Grunt

Livereload with Grunt

Probably if you are developing web app you have found yourself reloading pages over and over again. Every little change in your code require a reload of the page by pressing F5. In this tutorial we are going to see how to use Grunt with Watch and Express to have a page autoreload every time a file change in the application.

We will start from the basic MEAN stack we have built on this tutorial.

If you want you can clone the repository with

git clone https://github.com/andbet39/codetutorial-mean-stack-seed.git

Once you have the repository in place, start adding Grunt to the node installation. Grunt is a node task manager. What we are going to see in this tutorial is just one of the capabilities that Grunt Tasks offers. You can install it by

npm install grunt --save

Grunt is a modular application. You can download modules via npm. The module we are going to use for the live reload is the grunt-express, an express implementation made for Grunt, and the Watch module.

npm install grunt-contrib-watch --save
 npm install grunt-express --save

Grunt configuration is made in the Gruntfile.js file.

Watch

As first thing we configure Watch. Watch is a task that’s observe files in the directory you specify and run other task if that files change. Let’s create the Gruntfile.js in the home directory of the application and put this inside it :


module.exports = function(grunt){
	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),

		watch:{
			files:['public/**','server/**'],
			tasks:''
		},
	    	
	});

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

	};


If you run grunt watch and try to modify a file in the public or the server folder you will see something like this on your prompt.


 grunt watch
Running "watch" task
Waiting...
>> File "public\js\app.js" changed.
Completed in 0.000s at Fri Mar 27 2015 17:29:16 GMT+0100 (W. Europe Standard Time) - Waiting...


It mean that Watch is running and correctly configured to observe the file in the folders we specified. It’ s not enough for us to know just when a file is changed…

What we really want is our browser to reload the page and show the modification.

Livereload

We previously installed a module called grunt-express. This module/task help us to start an Express server with some nice feature already included and configurable via the Gruntfile.js. One of this feature is the Livereload.

Liverload inject a little javascript at the end of any page to permit the auto reloading of the page if the previously installed task “Watch” detect a change in any observed file.

To get it working paste this code into the Gruntfile.js


module.exports = function(grunt){
	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),

		watch:{
			options:{livereload:true},
			files:['public/**','server/**'],
			tasks:[]
		},
  		express:{
  			all:{
  				options:{
  					port:3000,
  					hostname:'localhost',
  					bases:['./public'],
  					livereload:true	
  				}
  			}
  		}
	});

	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-express');	
	grunt.registerTask('server',['express','watch']);

	};


What we made is to configure a Express server on port 3000, serving at localhost the page hosted in the public folder. We also set the livereload options to true. Note we also added a line into the watch configuration to indicate we are going to use livereload.

On the last three lines there is the definition of the grunt tasks. In the first 2 lines we loaded the default task for Watch and Express and in the last one we defined a custom task that run Express and Watch in sequence.

Now if you start the server using the task we just created

grunt server

you will get the livereload feature in every page. Try it by pointing to the index.html and change the file to write somenthing different. You will see your page reloading automatically.

I’m sure it worth to spend 10 mins on the livereload implementation instead loosing time pressing the F5 key thousands of times.

Cheerss! Happy coding!

Adam Brown
Please follow and like us:

Leave a Comment