Compass + Guard + Livereload = :)

4 juin 2014

Voici comment déployer (presque rapidement) un environnement Ruby pour bénéficier du compilateur css SASS via Compass et rechargement automatique de la page en fonction des modifications enregistrées, grâce à Livereload, le tout chapeauté par Guard.

Il faut installer gem et bundle au besoin :

sudo apt-get install gem
sudo gem install bundle

Ensuite dans le dossier parent du projet on crée un Gemfile

#Gemfile
source "http://rubygems.org"
 
group :development do
gem 'sass' # Sass.
gem 'compass' # Framework built on Sass.
gem 'compass-validator' # So you can <code class='spip_code spip_code_inline' dir='ltr'>compass validate</code>.
gem 'oily_png' # Faster Compass sprite generation.
gem 'css_parser' # Helps <code class='spip_code spip_code_inline' dir='ltr'>compass stats</code> 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.
gem 'bootstrap-sass'
end

Puis on lance coup sur coup Compass et Guard via Bundle pour initier le projet (ici avec l’option bootstrap-sass)

bundle install
bundle exec compass create mon_projet -r bootstrap-sass --using bootstrap

Je copie ici mes fichiers Guardfile et config.rb pour info :

# ~/.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 <code class='spip_code spip_code_inline' dir='ltr'>compass compile --time --quiet</code>
# https://github.com/guard/guard-compass
guard :compass do
watch(%r{(.*)\.s[ac]ss$})
ignore %r{^tmp/}
end
end
 
# Look for specified files in the current and child directories.
# <code class='spip_code spip_code_inline' dir='ltr'>find</code> 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)$})
ignore %r{^tmp/}
end
end
  
end

#config.rb
require 'bootstrap-sass'
# Sass options:
# http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#options
sass_options = Hash.new
sass_options[:debug_info] = false

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

Il reste à installer le module Firefox LiveReload

Avec ça l’environnement doit être prêt et fonctionnel.

On lance Guard via Bundle depuis le dossier parent du projet

bundle exec guard start