Sidenote: LiveReload For Better Workflow

• By Keir Whitaker
• October 7th, 2011
• Tools, Workflow
• 2 Comments

Welcome to the first entry in a new series on Smashing Coding called Sidenotes. Sidenotes are shorter than traditional Smashing Magazine articles and are designed to give you a quick introduction to useful tools and services. Over the next few weeks, we’ll be looking at productivity aids, useful apps, essential plugins and code examples that we think will help you in your daily coding work. If there is a tool, product or service that you think would be great to review, please do get in touch and let us know.

First up is LiveReload, a utility that eliminates the need to refresh the browser when you want to see HTML, CSS and JavaScript changes.

Overview

• Tool: LiveReload
• Description: Monitors changes in your files and automatically refreshes the browser
• Category: Developer workflow
• Price: Free
• Time to implement: 5 minutes
• OS: Mac OS X

What Does It Do?

LiveReload eliminates the need to refresh your browser every time you make a change to a file in your project. It’s pretty enticing: make a change to the CSS, and see your browser instantly refresh. The same goes for HTML, images and JavaScript. No more Alt + Tab and then hard-refresh; updates are now instant.

But it really comes into its own when used in combination with things like CoffeeScript, SASS, LESS, HAML or Jade. LiveReload monitors for any changes in your files, compiles them for you and then refreshes the browser. You can also specify the destination folder for compiled files. If this isn’t your thing or you have another way of handling compilation, you can simply turn it off.

Installation

1. Download LiveReload from the website, and install it.
2. After launching the application, you will be asked to add the relevant browser extensions.
3. Click on the LiveReload icon in the menu bar, and specify your “folders to watch.” I usually pick the project’s root folder, but you can be more specific if you wish.
4. Highlight your folder to watch and click “Settings.” From here, you can enable things such as Sass compilation.
5. Activate LiveReload in your browser. (In Safari, right-click and then select “Enable Live Reload.” In Chrome, click the LiveReload toolbar button.)
6. Change a file and watch the browser automatically refresh.

LiveReload for Rails

The installation process for Rails is a little different. The team at EnvyLabs has also created a four-minute screencast showing LiveReload in action.

Resources

• LiveReload on GitHub
• “The Story of LiveReload: The First Anniversary,” Andrey Tarantsov
• Live.js
  An alternative approach to auto-refreshing the browser.

(al)