We all do it when building a website, we hit the refresh button to reload our latest changes. This process of saving and reloading the browser can be eased using a plugin called Guard-LiveReload. This plugin is part of a ruby gem called Guard. Note, I am doing this on a windows box.

Installing/Using

  1. I will be going with the assumption that you have ruby installed locally. If you don’t head over to http://rubyinstaller.org/
  2. Install Guard gem and Guard-Livereload
    		gem install guard
    
    		gem install guard-livereload
    
  3. Go into your project root directory, and the project must run under a local server.
  4. Create a Guardfile and paste the following into it and save it without a file extention.

    		guard 'livereload' do
    		  watch(%r{.+\.(css|js|aspx|php|html?)$})
    		end
    

    The watch method allows you to define which files are watched by a Guard. It uses a regular expression. Here I am just looking for files with .css, .js, .aspx, .php and .html. You can always add to it.

  5. This works best with google chrome, so head over and install the livereload extension.
  6. Now you can go to your command prompt and cd into the project root directory and run. Make sure you have activated the chrome extension as well.

    		guard
    

    If all is well you should see “browser connected” in your command prompt.