Live reload for Web Projects

Why LiveReload?

LiveReload is a handy tool for web-developers. 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.

Live Reload 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 in Window and Mac?

• Installing Livereload on window and mac is pretty straight forward , we just need to download it from official website here

How to Install LiveReload in Ubuntu?

Installing Live Reload 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.

# //github.com/guard/guard-livereload

guard :livereload do

watch(%r{.+.(css|js|html)$})

end

NOTE — you can add as many extensions you want, like for php , we just need to add php besides html separated by pipe(|)

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)

How to use?

• After installation we need to go to our project and start our livereload application in that directory,
  this will tell livereload to keep track of all file inside this file and subdirectories.

now you need to go to Chrome and activate livereload Extension.

you haven’t already downloaded this plugin install it here

Now when you change something in file and save it, it will automatically.

If you find something wrong or have any question about the solution then comment down below, you can also contact us using contact form.