Once you've got a development server running that serves the pages, code, and assets that make up your web application, you will notice that you constantly have to refresh the browser each time you wish to observe a change that was made.
This is where the LiveReload tool and its constituent libraries come in handy. It's designed to automatically reload the browser's contents if a page or code file is changed, and even apply changes to CSS and images live, without refreshing the browser's contents.
We can set up LiveReload for our project with the help of two plugins that are discussed in other parts of this chapter. The development server provided by the contrib-connect (0.8.0) plugin can be configured to accept LiveReload triggers, and the contrib-watch (0.6.1) plugin to send them file events.
In this example, we'll work with the basic project structure that we created in the Setting up Grunt on a project recipe of this chapter. Be sure to refer to it if you are not yet familiar with it's contents.
We also make use of the contrib-connect and contrib-watch plugins in this recipe, which have each been discussed separately in the Setting up a basic web server and Watching files for changes recipes of this chapter. These are to be referred to if you are not yet familiar with the plugins they discuss.
The following steps take us through setting up a watch task that will automatically trigger a refresh when it observes changes to an HTML page that is served from a local development server.
We'll start by installing the packages containing the
contrib-connectandcontrib-watchplugins and loading their tasks by following the instructions provided in the Installing a plugin recipe of this chapter.For the sake of our example, we'll create a file called
index.htmlin thewwwdirectory, which will be the file that we wish to view in a browser and have automatically updated when changes are made to it. The contents for this file follows:<html> <head> <title>LiveReload Test</title> </head> <body> <h1>First there was this.</h1> </body> </html>Next, we'll set up our development server, which will serve the
index.htmlfile from thewwwdirectory. Along with the standard configuration, we'll set thelivereloadoption totrue, indicating that the development server should enable the browser to receive LiveReload triggers. This is all done by adding the following to our configuration:connect: { dev: { options: { base: 'www', livereload: true } } }Tip
Providing the
truevalue for thelivereloadoption includesconnect-livereloadin the middleware stack of the connect server. The middleware in turn inserts a snippet of code in the HTML code of the pages served, which enables the browser to accept LiveReload triggers.The
keepaliveoption can be excluded from this configuration due to the watcher process that will continue to run after the server is started. This means that the Grunt process will not end, which would also have stopped the server it started.Now, we'll set up a watcher to observe file events in the
www/index.htmlfile. Along with the standard configuration, we'll set thelivereloadoption totrue, indicating that the appropriate LiveReload triggers should be sent whenever changes are observed. This is done by adding the following to our configuration:watch: { www: { files: ['www/index.html'], options: { livereload: true } } }Finally, we can start our server and watcher using the
grunt connect watchcommand, which should produce output indicating the start of both:Running "connect:dev" (connect) task Started connect web server on http://0.0.0.0:8000 Running "watch" task Waiting...
Now, we can use our favorite browser to open the URL mentioned in the output, which should show us our sample page as served by the server:
Let's try out the LiveReload functionality by changing the
www/index.htmlfile and saving it. This action should produce the following output in the terminal in which the server and watcher were started:>> File "www/index.html" changed. Completed in 0.001s at Wed Jan 01 2014 00:00:00 GMT – Waiting...
Switching back to our browser that currently has the
http://0.0.0.0:8000URL open, we should now see the updated page, without having initiated a manual refresh: