Compass + Guard + Livereload = :)

Mots-clés
|

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 :

  1. sudo apt-get install gem
  2. sudo gem install bundle

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

  1. #Gemfile
  2. source "http://rubygems.org"
  3.  
  4. group :development do
  5. gem 'sass' # Sass.
  6. gem 'compass' # Framework built on Sass.
  7. gem 'compass-validator' # So you can `compass validate`.
  8. gem 'oily_png' # Faster Compass sprite generation.
  9. gem 'css_parser' # Helps `compass stats` output statistics.
  10. gem 'guard' # Guard event handler.
  11. gem 'guard-compass' # Compile on sass/scss change.
  12. gem 'guard-shell' # Run shell commands.
  13. gem 'guard-livereload' # Browser reload.
  14. gem 'bootstrap-sass'
  15. end

Télécharger

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

  1. bundle install
  2. bundle exec compass create mon_projet -r bootstrap-sass --using bootstrap

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

  1. # ~/.guardfile
  2. # More info at https://github.com/guard/guard#readme
  3.  
  4. notification :off
  5.  
  6. puts "Using default guard file."
  7.  
  8. group :development do
  9.  
  10. if File.exists?("./config.rb")
  11. # Compile on start.
  12. puts `compass compile --time --quiet`
  13. # https://github.com/guard/guard-compass
  14. guard :compass do
  15. watch(%r{(.*)\.s[ac]ss$})
  16. ignore %r{^tmp/}
  17. end
  18. end
  19.  
  20. # Look for specified files in the current and child directories.
  21. # `find` requires Ruby 1.9 or greater.
  22. require 'find'
  23. if Find.find(Dir.pwd).detect{|dir|dir=~/.+\.(css|js|html?|php|inc|theme)$/}
  24. guard :livereload do
  25. watch(%r{.+\.(css|js|html?|php)$})
  26. ignore %r{^tmp/}
  27. end
  28. end
  29.  
  30. end

Télécharger

  1. #config.rb
  2. require 'bootstrap-sass'
  3. # Sass options:
  4. # http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#options
  5. sass_options = Hash.new
  6. sass_options[:debug_info] = false
  7.  
  8. css_dir         = "dev/css"
  9. sass_dir        = "dev/css/sass"
  10. fonts_dir       = "dev/css/fonts"
  11. javascripts_dir = "dev/js"
  12. images_dir      = "dev/css/img"
  13. relative_assets = true
  14. output_style    = (environment == :production ? :compressed : :expanded)

Télécharger

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

  1. bundle exec guard start