Watching your css and html with Guard


// check ruby
ruby -v
// check gem
gem -v
// update gem
sudo gem update --system

mkdir demo
cd demo
// install guard
sudo gem install guard
// install guard-livereload
sudo gem install guard-livereload
// then install and run the chrome extension livereload. Go to chrome://extensions/ and tick Allow access to file URLs. Then tick LiveReload to watch html and css files change 

Guard is your best friend, RubyInstaller for Windows

// check ruby
ruby -v
// check gem
gem -v
// update gem
sudo gem update --system

mkdir demo
cd demo
// install guard
sudo gem install guard
// install guard-sass
sudo gem install guard-sass
// initialize This will create a Guardfile
guard init

Open Guardfile and modify it.

guard 'sass', :input => 'sass', :output => 'css'

To start guard/monitor, type this on a terminal


Create sass/buttons.sass file. And add the following and save to see the change in css/buttons.css which will be automatically created.

$bg : white

    backgroud: $bg
    padding: 10px
    border: 1px solid back 

(You may need to install dependensies.)

gem install rb…..

To exit

e or exit

Installing coffeescript

gem install guard-coffeescript
// initialize coffeescript since you have sass already
guard init coffeescript
// for if it is the first init, then
guard init
// change Guardfile
guard 'coffeescript', :input => 'coffee', :output =>'js'
guard 'sass', :input => 'sass', :output => 'css'

Create coffee/ file and add the followings

name = 'Joe'

alert name

Run guard and save and see it will create a file js/main.js

Using livereload. Create index.html and in sublime text,

html5 (and tab to expand)

<!doctype html>
    <meta charset="utf-8">
    <meta charset=utf-8>
    <h1>Hello World!</h1>

Exit guard

// install 
sudo gem install guard-livereload

Install a browser extension for Chrome or FF. In Chrome, you need to tick Allow access to file URLs in extension setting for LiveReload.

initialize livereload

guard init livereload

// change Guardfile 
guard 'livereload' do

Start Guard


Enable livereload in Chrome by clicking the icon and the center is black. And check index.html on Chrome.

Edit index.html and save it to see the change.

Add stulesheet to index.html and sass/main.sass and add some css.

<link rel="stylesheet" href="css/main.css">

... I just installed Codekit which does the same things.

How to concatinate and minimize with Guard.

// for concatination
sudo gem install guard-concat
// for minification
sudo gem install guard-uglify
guard init concat
// this will add the followings
# This will concatenate the javascript files    specified in :files to public/js/all.js

guard :concat, type: "js", files: %w(), input_dir:  "public/js", output: "public/js/all"

guard :concat, type: "css", files: %w(), input_dir:     "public/css", output: "public/css/all"

// modify for this example for js
// this will concat main.js and module.js and save as all.js in js folder.
… "js", files: %w(main module), input_dir: "js", output: "js/all"

Create a coffee/ and add class Mod for ex.

Start guard and save again to see all.js is created in js folder.


guard init uglify

Change Guardfile

guard 'uglify', :destination_file => "public/javascripts/application.js" do
watch (%r{app/assets/javascripts/application.js})


guard 'uglify', :destination_file => "js/all.js" do
watch ('js/all.js')

Sublime Guard


I had a problem to save twice for sass. I have upgrade ruby 2.0.0 but it doesn't change.


How to install Ruby 2.0.0 on Mountain Lion

Written on June 10, 2013