Guard


## Watching your css and html with Guard

### installation

    // 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 to watch html and css files change 
            



## [Guard is your best friend]

[Guard is your best friend](http://net.tutsplus.com/tutorials/tools-and-tips/guard-is-your-best-friend/)

[Rubygems.org](http://www.rubygems.org)
[RubyInstaller for Windows](http://www.rubyinstaller.org)

    // 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

    guard
	
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

    .button 
    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/main.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>
    <head>
        <meta charset="utf-8">
        <meta charset=utf-8>
        <title>title</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
	</html>
	
Exit guard

	e
	// 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
  	watch(%r{.+\.(css|html|js)$})
	end

Start Guard

	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. <http://incident57.com/codekit/index.php>
…

## How to concatinate and minimize with Guard.

    //exit
    e
    // 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/module.coffee and add class Mod for ex.

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

## Minify

	e
	guard init uglify
	
Change Guardfile

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

to

	guard 'uglify', :destination_file => "js/all.js" do
  	watch ('js/all.js')
	end
	
##Sublime Guard
<https://github.com/cyphactor/sublime_guard>
	
## Problem
I had a problem to save twice for sass. I have upgrade ruby 2.0.0 but it doesn't change.

Read <http://architects.dzone.com/articles/upgrading-ruby-20-mountain>

How to install Ruby 2.0.0 on Mountain Lion
<http://www.interworks.com/blogs/ckaukis/2013/03/05/installing-ruby-200-rvm-and-homebrew-mac-os-x-108-mountain-lion>