2013-04-03 6 views
2

J'utilise Mac OS X Mountain Lion et je configure régulièrement Ruby via RVM. J'ai ensuite installé Middleman (http://middlemanapp.com/) qui fonctionne bien. J'ai été capable d'ajouter des paramètres de configuration et de construire un projet.Sass/Compass ne compile pas en utilisant Guard avec Middleman

Mes problèmes viennent d'essayer d'utiliser Guard pour compiler Sass/Compass et créer un lien avec LiveReload pour actualiser automatiquement mon navigateur.

Ma structure de projet Middleman est la suivante:

{project-name}/site/source

(la source est le dossier Middleman qui compile un dossier 'build' en même niveau)

Mon Gemfile/config.rb/guardfile sont ici:

{project-name}/s ite/

Enumérés ci-dessous sont mes Gemfile, Config.rb et mon Guardfile.

Gemfile:

# If you have OpenSSL installed, we recommend updating 
# the following line to use "https" 
source 'https://rubygems.org' 

gem 'middleman', '~>3.0.12' 
gem 'sass'      
gem 'compass' 
gem 'oily_png' 
gem 'guard' 
gem 'guard-compass' 
gem 'guard-shell'    # Run shell commands. 
gem 'guard-livereload'  # Browser reload. 

gem 'rb-fsevent', :require => false  # Mac OSX 

Congid.rb (contient également une config pour construire Middleman mais non liée à Sass/Compass)

# 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] = true 

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

environment = :development 

sass_dir = 'source/sass' 
css_dir  = 'source/css' 
js_dir  = 'source/js' 
images_dir = 'source/img' 
relative_assets = true 
output_style = (environment == :production ? :compressed : :expanded) 

Guardfile

# ~/.guardfile 

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

notification :off 

puts "Using guard file for markweston project." 

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 


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

Je peux exécuter le 'bundle exec guard' qui fonctionne, et quand je lance LiveReload dans mon navigateur, le terminal me dit que le navigateur s'est connecté.

Une chose à noter est que je reçois cette erreur après l'exécution de « paquet garde exec »:

NoMethodError en ligne [ « 264 »] de /Users/Mark/.rvm/gems/ruby-1.9 .3-P385/gemmes/boussole 0.12.2/lib/boussole/configuration/inheritance.rb: activer

Ayant une certaine difficulté à comprendre cela aussi le moment. Le problème majeur est quand j'écris réellement n'importe quel Sass dans un de mes fichiers .scss détenus dans mon répertoire sass, ils ne compilent pas en .css dans mon répertoire CSS. Le terminal ne dit rien, rien ne se passe. J'ai quelque chose qui ne va pas avec ma configuration mais je n'arrive pas à comprendre quoi.

Quelqu'un peut-il vous aider s'il vous plaît?

Merci,

Marque.

+0

@CraigColes inclus un lien vers un projet d'installation qui est pratique, mais il est intéressant de noter que le site Middleman est effectivement construit dans Middleman, donc peut-être utile d'utiliser comme démo: [Middleman Guides] (https://github.com/middleman/middleman-guides) mais c'est plus complexe que l'autre exemple. –

Répondre

2

J'ai eu de la bonne chance avec le middleman-livereload gem.

En outre, Middleman a Compass et Sass construit et vous pouvez grandement simplifier cela en exécutant middleman server et visiter http://localhost:4567/ au cours du développement qui prendra soin de votre pré-traitement, ainsi que l'exécution guard avec live-reload pour rafraîchir votre navigateur. Vous n'aurez plus besoin d'exécuter compass watch ou les commandes guard.

Mon Gemfile ressemble à ceci:

gem "middleman", "~> 3.0.13" 
gem "middleman-livereload" 

Alors, je fortement recommande en utilisant le prescrit development cycle et ne pas essayer de ré-inclure Sass et Compass qui viennent au four à

2

Nous avons mis. ensemble une configuration simple d'un projet intermédiaire. N'hésitez pas à l'utiliser: https://github.com/beef/beef-middleman

+0

Vive les gars. J'ai différentes configurations pour sass/compass et je suis confus sur la façon dont Middleman fonctionne réellement. Il vous cache beaucoup de configuration, maintenant je l'ai fonctionné. J'ai marqué @bookcasey correct parce qu'il est arrivé en premier. –