Question

我正在运行Mac OS X Mountain Lion，并通过RVM轻松设置Ruby。然后我安装了Middleman（http://middlemanapp.com/），工作正常。我已经能够添加配置设置并进行项目构建。

我的问题来自于尝试使用Guard编译Sass / Compass并使用LiveReload链接以自动刷新浏览器。

我的中间人项目结构如下：

{项目名称} /位点/源

（source是Middleman文件夹，它编译为同一级别的'build'文件夹）

我的gemfile / config.rb / guardfile在这里：

{项目名称} /站点/

下面列出的是我的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 （还包含一些Middleman版本的配置，但与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

我可以运行'bundle exec guard'，它可以运行，当我在浏览器中运行LiveReload时，终端会告诉我浏览器已连接。

有一点需要注意的是，在运行'bundle exec guard'之后我收到了这个错误：

/Users/Mark/.rvm/gems/ruby-1.9.3-p385/gems/compass 0.12.2 / lib / compass / configuration / inheritance.rb的行[“264”]上的NoMethodError：激活

目前在解决这个问题时遇到了一些麻烦。

主要问题是当我在我的sass目录中保存的一个.scss文件中实际编写任何Sass时，它们不会在我的css目录中编译为.css。终端什么都没说，没有任何反应。我的配置有问题，但无法弄清楚是什么。

有人可以帮忙吗？

谢谢，

标记。

Answer 1

我对middleman-livereload gem祝你好运。

此外，Middleman内置了Compass和Sass，您可以在开发期间运行middleman server并访问http://localhost:4567/来大大简化此操作，这将负责您的预处理并运行guard使用live-reload刷新浏览器。您不再需要运行compass watch或guard命令。

我的gemfile看起来像这样：

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

所以，我强烈建议使用规定的development cycle，而不是试图重新包括Sass和指南针。

Answer 2

我们整理了一个中间人项目的简单设置。随意使用它：https://github.com/beef/beef-middleman

Sass / Compass没有使用Guard和Middleman设置进行编译

2 个答案: