2013-04-03 27 views
2

我正在運行Mac OS X Mountain Lion,並通過RVM輕鬆設置Ruby。然後我安裝了Middleman(http://middlemanapp.com/),它工作正常。我已經能夠添加配置設置並構建一個項目。Sass/Compass不能編譯使用Guard with Middleman setup

我的問題來自於嘗試使用Guard來編譯Sass/Compass,並鏈接到LiveReload以自動刷新我的瀏覽器。

我的中間人項目結構如下:

{項目名稱} /位點/源

(源是在相同的編譯爲「構建」文件夾中的中間人夾級)

我的Gemfile/config.rb/guardfile在這裏:

{項目名稱} /秒ite/

下面列出的是我的Gemfile,Config.rb和我的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(還包含一些配置爲中間人的構建,但沒有涉及到薩斯/北斗)

# 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 

我可以運行'bundle exec guard'這個工具,當我在瀏覽器中運行LiveReload時,終端告訴我瀏覽器已經連接。

有一點要注意的是,我跑「捆綁EXEC後衛」後出現此錯誤:

NoMethodError上線[「264」] /Users/Mark/.rvm/gems/ruby-1.9的.3-p385/gems/compass 0.12.2/lib/compass/configuration/inheritance.rb:activate

在解決這個問題時遇到了一些麻煩。

主要問題是當我實際在我的sass目錄中保存的.scss文件之一中編寫任何Sass時,它們不會編譯爲我的css目錄中的.css文件。終端什麼也沒說,沒有任何反應。我的配置有問題,但無法弄清楚。

任何人都可以幫忙嗎?

謝謝,

馬克。

+0

@CraigColes包括一個安裝項目的鏈接,這個鏈接很方便,但值得注意的是Middleman網站實際上是在Middleman中構建的,因此可能值得用作演示:[Middleman Guides]( https://github.com/middleman/middleman-guides),但它比另一個例子更復雜。 – 2013-04-09 18:45:59

回答

2

我已經與middleman-livereload gem祝你好運。

此外,中間人有指南針和薩斯內置的,你可以極大地運行middleman server和發展,這將照顧你的預處理以及運行guardlive-reload刷新瀏覽器訪問期間簡化http://localhost:4567/此。您不再需要運行compass watchguard命令。

我的Gemfile看起來是這樣的:

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

因此,使用規定development cycle而不是試圖我強烈reccomend重新加入薩斯和指南針這進來烤

2

我們已經把。一起簡單設置一箇中間人項目。隨意使用它:https://github.com/beef/beef-middleman

+0

歡呼傢伙。我爲sass/compass準備了各種不同的設置,並且我對中間人的實際工作方式感到困惑。它隱藏了很多來自你的設置,現在我有它的工作。我標記@bookcasey是正確的,因爲他先到那裏。 – 2013-04-09 18:43:07