使用 FSSM 监控 SASS 文件时出错

Question

我正在监视 WordPress 项目中的主题文件夹以监视 .scss 文件并通过命令行 sass 工具运行它们以创建干净的 .css 文件。

该脚本的工作原理与转换一样，但它无法提供任何输出，因为它收到“FSSM 回调错误”。谁能告诉我为什么会发生这种情况？

#sudo gem install fssm
#sudo gem install haml
# Script to watch a directory for any changes to an scss file and compile it to css in the same place
#
# USAGE: ruby sassy.rb <directory_to_watch>
#
require 'rubygems'
require 'fssm'

#directory = File.join(File.dirname(__FILE__), ARGV.first)
directory = "../wp-content/themes/"
FSSM.monitor(directory, '**/*.scss') do
  update do |base, relative|
    input = "#{base}/#{relative}"
    output = "#{base}/#{relative.gsub!('.scss', '.css')}"
    command = "sass --scss --watch #{input}:#{output}"
    %x{#{command}}

    puts "SASSy regenerated #{input} to #{output}"
  end
end

正如我所说，SCSS 被编译为同一目录中的 .css 文件，但错误是：

sy-mbp:_build simon$ ruby sassy.rb
^Csassy.rb:19:in ``': update - /Data/code/eil/wp-content/themes/eil-baseline/style.scss:  (FSSM::CallbackError)
    from sassy.rb:19
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/path.rb:73:in `call'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/path.rb:73:in `run_callback'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/path.rb:55:in `callback_action'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/path.rb:35:in `update'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/state/directory.rb:38:in `modified'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/state/directory.rb:36:in `each'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/state/directory.rb:36:in `modified'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/state/directory.rb:17:in `refresh'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/fsevents.rb:15:in `add_handler'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/fsevents.rb:14:in `each'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/fsevents.rb:14:in `add_handler'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/rubycocoa/fsevents.rb:107:in `call'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/rubycocoa/fsevents.rb:107:in `initialize'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/fsevents.rb:27:in `call'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/fsevents.rb:27:in `CFRunLoopRun'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/backends/fsevents.rb:27:in `run'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm/monitor.rb:20:in `run'
    from /Library/Ruby/Gems/1.8/gems/fssm-0.2.3/lib/fssm.rb:18:in `monitor'
    from sassy.rb:12

非常感谢帮助！

西蒙

Answer 1

使用 watchr 重写了它，我发现它非常容易上手。将https://gist.github.com/919884保存到watch_scss.rb，安装watchr gem 并在 wp-content 上方的目录中运行 watchr watch_scss.rb 。

Answer 2

使用当前版本的 sass gem，从命令行运行

sass --watch ../wp-content/themes/

将处理查找 scss 文件更改并生成 css 版本

http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html#3-0-0-watch