Sass+Compass, Guard, LiveReload

README.mdown

This will enable Sass+Compass with LiveReload through Guard. (Guard screen cast)

You will also need a browser component to communicate with LiveReload. (browser extension, livereload.js)

If you prefer going through a GUI, that option is available. The following instructions is specific to Mac OS X and it works through the command line.

Note that this is not specific to Rails projects. This can work for any standalone front-end project.

Instructions

You must first get access to the developer tools. This is needed to compile necessary components for this set-up. The easier way is to download the Developer Tools from the Mac App Store which is free. It's a heavy download weighing over 1.5GB but it includes an iOS emulator which is great for testing. The other option is to download the Command Line Tools (Downloads page). You will need a developer account which is free.

If you are using the Command Line Tools, a path or development environment must be set manually the first time. Do not invoke this if you're using the full Developer Tools since it will already be set to /Applications/Xcode.app/Contents/Developer.

Open Terminal.app and type (for Command Line Tools only):

$ sudo xcode-select -switch /

Update Gem system then install Bundler.

$ sudo gem update --system
$ sudo gem install bundler

Place the Gemfile and .guardfile attached to this gist into your home folder then type:

$ bundle

cd to your project and compass init and configure the generated config.rb file. Here's an example:

# Sass options:
# http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#options
sass_options = Hash.new

# Enable Sass inspection directly from the browser.
#
# Chrome Canary support (Applies to Webkit Nightlies as well.):
#   http://blog.q42.nl/post/35203391115/debug-sass-and-less-in-webkit-inspector-and-save-css-cha
# Firefox Extension:
#   https://addons.mozilla.org/en-US/firefox/addon/firesass-for-firebug
#
# Set to true to enable. Enabling will disable `line_comments`.
#
sass_options[:debug_info] = false

##
# Compass configuration:
# http://compass-style.org/help/tutorials/configuration-reference

# Development is the default environment. When compiling for production, this
# should be flagged as :production. This can be done through the command line
# with the following.
#
#   $ compass compile -e production --force
#

css_dir         = "css"
sass_dir        = "css-sass"
fonts_dir       = "fonts"
javascripts_dir = "js"
images_dir      = "img"
relative_assets = true
output_style    = (environment == :production ? :compressed : :expanded)

In your project folder, start the Guard, enable the Browser plug-in and start editing.

$ bundle exec guard

To exit enter e and enter.

Using compass watch or the equivalent in Sass is not required since it is being handled through Guard::Compass. A huge plus of Guard is that it uses a single observer and the extensions handle specific details like communicating with the browser (LiveReload) or telling Compass to compile. Any modifications will be directed to specific Guard extensions based on watch rules.

Notes:

• As of this writing, invoking the guard command directly does not work with guard-livereload. The browser extension complains that the server is not running. (update: I now wrap the command in bundle exec which I haven't tested here.) To work around this use guard start -i instead (non-interactive mode). To exit, ctl-c. I have not experienced this with my Homebrew install but for the default Ruby installation, this is a problem.

gistfile1.rb

# ~/Gemfile

source "http://rubygems.org"

group :development do
  gem 'sass'                    # Sass.
  gem 'compass'                 # Framework built on Sass.
  gem 'compass-validator'       # So you can `compass validate`.
  gem 'oily_png'                # Faster Compass sprite generation.
  gem 'css_parser'              # Helps `compass stats` output statistics.
  gem 'guard'                   # Guard event handler.
  gem 'guard-compass'           # Compile on sass/scss change.
  gem 'guard-shell'             # Run shell commands.
  gem 'guard-livereload'        # Browser reload.
end

gistfile2.rb

# ~/.guardfile

# More info at https://github.com/guard/guard#readme

notification :off

puts "Using default guard file."

group :development do

  if File.exists?("./config.rb")
    # Compile on start.
    puts `compass compile --time --quiet`
    # https://github.com/guard/guard-compass
    guard :compass do
      watch(%r{(.*)\.s[ac]ss$})
    end
  end

  ## Uncomment if running a Drupal theme. Clears .info caches. Requires Drush.
  # if Dir.glob("*.info").any?
  #   guard :shell do
  #     puts 'Monitoring theme info file.'
  #     watch(%r{.*\.info$}) { |m|
  #       puts 'Change detected: ' + m[0]
  #       `drush php-eval "system_rebuild_theme_data();"`
  #       puts 'Cleared info caches.'
  #     }
  #   end
  # end

  ## Look for specified files in the current and child directories.
  ## `find` requires Ruby 1.9 or greater.
  # require 'find'
  # if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc|theme)$/}
  #   guard :livereload do
  #     watch(%r{.+\.(css|js|html?|php|inc|theme)$})
  #   end
  # end

  # Uncomment block above and remove this if using Ruby 1.9 or greater.
  # https://github.com/guard/guard-livereload.
  guard :livereload do
    watch(%r{.+\.(css|js|html?|php|inc|theme)$})
  end

end

Fantastic, thanks for the guard start -i tip - I couldn't get the extension to connect with just guard either.

good stuff, might want to throw around something like this
````guard :compass, :configuration_file => 'public/config.rb', :project_path => 'public/' do
useful when the Guardfile is not in the same location as the compass config file

Really useful. Had a little trouble with livereload on a remote server. Browser dit not reload after first compass compile. Had to save twice for some reason.

But when I added the scss extension to the :livereload watch it worked smoothly.

watch(%r{.+\.(scss|css|js|html?|php|inc|theme)$})