LiveReload is a tool that applies your HTML, CSS and JavaScript changes to Google Chrome or Safari without having to reload the page. With LiveReload, developers can avoid manually refreshing a page using Ctrl + R or F5.

Installing LiveReload

sudo apt-get install ruby1.9.1 ruby1.9.1-dev

Now install these RubyGems,

sudo gem install bundle

sudo gem install guard

sudo gem install guard-livereload

Inside your project folder, execute:

bundle init

If you get an error saying ‘bundle: command not found’, then you need to add the ruby gem executable directory to your path.

export PATH=/var/lib/gems/1.8/bin:$PATH

The path mentioned in the above command might be different in your case – based on your Linux distribution and version. In my case, I am using Ubuntu 11.04.

Once bundle init runs successfully, a Gemfile will be created in your project folder. Open this file and add these lines,

gem 'guard'
gem 'guard-livereload'

Now execute,

bundle exec guard init livereload

Now a Guardfile will be created in your project folder. This Guardfile contains some predefined monitoring directories which you might have to modify based on your project.

At this point, you can start the Guard server by executing,

bundle exec guard

Install the LiveReload browser extension

Download the LiveReload extension for Chrome or Firefox and configure it by specifying the hostname and port used by the Guard server (by default localhost:35729).

Once the LiveReload extension is enabled, any changes to monitored files like CSS JavaScript, HTML are immediately applied to the browser.