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:
sudo apt-get install ruby-dev
sudo gem install rdoc -V
sudo gem install guard -V
sudo gem install guard-livereload -V
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.
# https://github.com/guard/guard-livereload
guard :livereload do
watch(%r{.+.(css|js|html)$})
end
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.
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.