LiveReload is a handy tool for web-developers. Do you not use Dreamweaver alternatives for linux, or any other web development tools? If you make use of text editors to code and web browsers to preview the result, then you must be tired of constantly hitting the save button on your text editor as well as that reload button on your web browser.

Why LiveReload?

LiveReload is here to your rescue. What it does is, it monitors for changes in the file system (a folder that you specify) and then automatically reloads the browser if any change is detected. Also, when you change a CSS file or image, the browser is updated instantly without even reloading the page.

How to Install LiveReload on Ubuntu?

Installing LiveReload is a pretty straightforward process in Windows, Mac and on Linux too (somewhat different though). In order to install LiveReload on Ubuntu, hit the following commands on your terminal one after another:

Here, we are installing rubygems, guard and finally guard-livereload.

When you are done with that, create a new file named .Guardfile in your home directory. Put the following in the file and save it.

This will watch the directories (that we’re working on) for the changes in css, js, and html files inside them (or in their subdirectories).

Now, what you need to do next is grab LiveReload extension for your web-browser. It is this extension that refreshes the page after receiving command from guard-livereload app. Extensions are available for Chrome, Firefox and Safari.

Once you have it installed on your browser, bring up your terminal and browse to the directory where your web files (html, css, js) are located. Then type guard and press enter. You should receive the following message.

Guard-LiveReload on Ubuntu

Open up the HTML file on your browser, and press on the LiveReload button (which is located in the main toolbar in Chrome and Safari & in the add-on toolbar in Firefox). The LiveReload button should now be active.

Leave the terminal as it is. Just go on making changes to your site and when you save the file, the changes will be reflected immediately on the browser. No need to press on reload button anymore.

Bonus Tip: I am using Sublime text and have edited the settings so that the file is automatically saved. That’s right. I just make changes to the code, and go to the browser without saving it. The file is automatically saved, and the changes are seen immediately on the browser. I am not sure if other editors support it, but I can tell you how I did it in Sublime text. First, install Sublime Text 2/3. Then head over to Preferences > Settings – Default > Copy everything listed there. Go to Preferences > Settings – User > Paste everything here. Search for “save_on_focus_lost” and set its value to true. That’s it.

Whenever Sublime Text loses focus (i.e. you move to the browser), the file will be automatically saved, and the page reloaded.

You’re welcome. :)

PS. BrowserSync is an alternative to LiveReload, and might be better, but I could not get it to work.