2

我正在运行 Mac OS X Mountain Lion 并最近通过 RVM 设置 Ruby。然后我安装了 Middleman ( http://middlemanapp.com/ ),它工作正常。我已经能够添加配置设置并构建项目。

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

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

{项目名称}/站点/源

(来源是中间人文件夹,它编译到同一级别的“构建”文件夹)

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

{项目名称}/站点/

下面列出了我的 Gemfile、Config.rb 和我的 Guardfile。

宝石文件:

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

# 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。终端什么也没说,什么也没发生。我的配置有问题,但无法弄清楚是什么。

有人可以帮忙吗?

谢谢,

标记。

4

2 回答 2

2

我在middleman-livereload宝石上运气不错。

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

我的 gemfile 看起来像这样:

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

因此,我强烈建议使用规定的开发周期,而不是尝试重新包含内置的 Sass 和 Compass。

于 2013-04-03T23:59:27.127 回答
2

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

于 2013-04-05T16:11:31.500 回答