Guard::LiveReload Automatic Browser Reload

12.24.2014

Guard::LiveReload is a gem that allows you to automatically reload your browser when you update your “view” files. This is massively helpful when you’re doing a lot of front-end development. This may not seem like a lot, but its super convenient not having to click on the browser and hit cmd + r every time you want to see your changes. There’s only two main steps to installing Guard::LiveReload.

Step 1: Install Guard::LiveReload

Follow the instructions here: https://github.com/guard/guard-livereload.

Step 2: Install LiveReload on either Firefox or Chrome

In Firefox, go to Tools > Add-ons, find LiveReload and install it. This will give you a little circular icon of two arrows in the upper right of your browser.

In Chrome, click on Apps > Web Store, find LiveReload and install it. This will also give you the circular icon.

Now, when you initialize guard, click on the icon to connect the browser. Whenever you update and save a view, it should reload the browser.

Step 3: Add scss and anything else you want guard to detect to the Guardfile

watch(%r{(app|vendor)(/assets/\w+/(.+\.(scss|css|js|html|png|jpg))).*}) { |m| "/assets/#{m[3]}" }

Restart guard by hitting q and then running guard.