LiveReload is a tool that applies your HTML, CSS and JavaScript changes to Firefox, Google Chrome or Safari without having to reload the page. With LiveReload, developers can avoid manually refreshing a page using Ctrl + R or F5. It also allow us to do some pre processing (like SASS or LESS compiling) before it fires browser refresh.
LiveReload works by monitoring files you are editing and as soon as you save your work it detects it and refreshes connected browsers.
Installing LiveReload
1. First we install Ruby and Ruby dev packages
sudo yum install ruby ruby-dev
2. Then we have to setup needed Ruby gems
sudo gem install bundle
sudo gem install guard
sudo gem install guard-livereload
3. Inside your project folder add new file with name “Guardfile” and put this code inside
guard 'livereload' do
watch(%r{.+\.(html|php|css|js)$})
end
Which will tell guard to monitor changes for files with html, php, css and js extension.
4. Now start Guard LiveReload from project folder
guard
5. In next step, you need to install LiveReload browser extension. You can find list of supported browsers and links for extensions installation on this FAQ page over on LiveReload site:
LiveReload FAQ Browser extension installation
For Firefox you will have to use extension from previous link because version from Mozilla Addons site because it’s too old and it doesn’t works with Guard.
After you install you will get new icon in your toolbar on which you need to click so it will connect to Guard LiveReload.
You can even connect to Apple Iphone and