In the vein of the HTML5 Boilerplate project, this is a simple script that allows you to run Guard to refresh your web browser and optionally recompile Sass files to CSS and/or Haml files to HTML. Just install it, rungbp start in your project directory root and you're off to the races. A Guardfile gets created which you can customize to your tastes.

Impatient? Have Ruby installed and understand what a gem is? Use the Boilerplates? Rocking Sass and Haml? Great!

1. Install the LiveReload extension in your browser

2. Install guard_boilerplate and start a new project:

    gem install guard_boilerplate
    if [ `uname -s` == "Darwin" ] ; then gem install rb-fsevent ; fi
    if [ `uname -s` == "Linux" ] ; then gem install rb-inotify ; fi
    mkdir my_site && cd my_site
    curl -L 'https://github.com/paulirish/html5-boilerplate/tarball/master' | tar -xzf - --strip-components 1
    gbp hamlize && gbp sassify
    gbp start
   

3. Hit the LiveReload LR button in your browser

4. Edit!

Confused? Read on...

You will need to have Ruby already installed on your system, but chances are you do already.

If you are on Mac OS X or Linux, then RVM to the rescue:

bash < <( curl http://rvm.beginrescueend.com/releases/rvm-install-head )
source "$HOME/.rvm/scripts/rvm"
cat <<BASHRC >> "$HOME/.bash_profile"
 
[[ -s "\$HOME/.rvm/scripts/rvm" ]] && . "\$HOME/.rvm/scripts/rvm"
BASHRC
rvm 1.9.2 install && rvm 1.9.2 --default

This is slighty more than you'll need, but do yourself a favor and use the Rails Installer for Windows. It's fast, painless and as a bonus you'll be ready to crank out a Ruby on Rails or Sinatra web application in 5 minutes flat. [pause...] See, wasn't that easy?

Secondly, you will need to install the LiveReload browser extension into your browser-du-jour (Chrome Chrome Chome!). For more detailed instructions, see the LiveReload's github README and look for the extension installation section.

Are you ready?

gem install guard_boilerplate

On the Mac?

gem install rb-fsevent

On Linux?

gem install rb-inotify

Now give yourself a slap on the back.

Change directory into your new web-wonder project directory, and start the listener:

cd my_site
gbp start

Using the badass HTML5 Boilerplate as your base? I thought so. Try this one out, my Mac and Linux pals:

mkdir my_site && cd my_site
curl -L 'https://github.com/paulirish/html5-boilerplate/tarball/master' | tar -xzf - --strip-components 1
gbp start

LiveReload needs to refresh an http:// URL (rather than a file://), so an embedded HTTP server will fire up by default on port 3000 thanks to the WEBrick guard.

Finally, if you're sitting there with your browser page open, don't forget to activate the LiveReload extension. Otherwise, it's going to get pretty darn boring. Open your my_site project in your text editor, update index.html, save, and marvel ;)

Would you rather author Sass stylesheets? Migrate your *.css files to *.scss files automatically:

gbp sassify

Your CSS files will be generated back into css/ on save. Sweet.

If Haml is your bag, then you can also convert your *.html files to *.haml with a quick round of:

gbp hamlize

To compress your HTML and CSS output (suitable for production):

gbp minify

To generate all your HTML and CSS output (suitable for development):

gbp prettify

The file that controls "what happens when" is your Guardfile which is pretty straight forward. The 'livereload' block has a bundle of watch listeners that are file patterns. Whenever any of these files change, any attached web browsers will be reloaded with LiveReload.

If your images directory was actually images/ and could contain gifs, then you could modify the Guardfile line from:

watch(%r{img/.+\.(png|jpeg|jpg)})

to:

watch(%r{images/.+\.(gif|png|jpeg|jpg)})

If you need the HTTP server to run on another port, update the 'webrick' block to:

guard 'webrick', :port => 8080 do
end

Don't worry, your web browser will keep up.

Just fill in your Step 2 and you're on your way.

• Source hosted at GitHub.
• Report Issues/Questions/Feature requests on GitHub Issues.

Pull requests are very welcome!

• Fletcher Nichol (@fnichol)

Special credit to Natasha Nunn (@nnunny) for giving me the lunch hour power project idea

• Guard
• Guard-LiveReload plugin
• Guard-Sass plugin
• Guard-WEBrick plugin
• LiveReload
• Sass
• RVM
• Rails Installer