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, run
gbp 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!
Install the LiveReload extension in your browser
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
Hit the LiveReload LR button in your browser
Confused? Read on...
You will need to have Ruby already installed on your system, but chances are you do already.
Mac OS X And Linux (RVM)
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
Windows (Rails Installer)
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?
LiveReload Browser Extension
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
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 ;)
Sass Up Your Stylesheets
Would you rather author Sass stylesheets? Migrate your
*.css files to
*.scss files automatically:
Your CSS files will be generated back into
css/ on save. Sweet.
Haml Your Markup
If Haml is your bag, then you can also convert your
*.html files to
*.haml with a quick round of:
Minify Your Haml And SASS Output
To compress your HTML and CSS output (suitable for production):
Prettify Your Haml And Sass Output
To generate all your HTML and CSS output (suitable for development):
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:
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.
Pull requests are very welcome!