Rails：将 livereload 与 Asset Pipeline 一起使用答案

【问题标题】：Rails: Use livereload with Asset PipelineRails：将 livereload 与 Asset Pipeline 一起使用
【发布时间】：2011-12-23 07:56:36
【问题描述】：

关于 Rails 专业人士的快速问题...

在使用 Rails 3.0.x 应用程序时，我是 Guard 和 LiveReload 的重度用户。然而，似乎在 Rails 3.1 中使用资产管道时，livereload 守卫不知道对 Sass 文件的更改应该触发向浏览器发送新的 css。

是否有人将 LiveReload 与 Asset Pipeline 一起使用？如果是这样，你是如何让它发挥作用的？

谢谢！

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3.1 sass asset-pipeline

【解决方案1】：

在 Github 上关注一些问题线程后，我发现以下解决了我的问题：

1) 确保所有 scss 文件都按照新的资产约定命名，如下所示：filename.css.scss

我在 Rails 3.1 之前使用的是 scss，并且刚刚将我所有的 sass 文件命名为 filename.scss。

2) 在您的保护文件中使用以下内容进行 livereload：

guard 'livereload' do
  watch(%r{app/helpers/.+\.rb})
  watch(%r{app/views/.+\.(erb|haml)})
  watch(%r{(public/).+\.(css|js|html)})
  watch(%r{app/assets/stylesheets/(.+\.css).*$})    { |m| "assets/#{m[1]}" }
  watch(%r{app/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{lib/assets/stylesheets/(.+\.css).*$})    { |m| "assets/#{m[1]}" }
  watch(%r{lib/assets/javascripts/(.+\.js).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{vendor/assets/stylesheets/(.+\.css).*$}) { |m| "assets/#{m[1]}" }
  watch(%r{vendor/assets/javascripts/(.+\.js).*$})  { |m| "assets/#{m[1]}" }
  watch(%r{config/locales/.+\.yml})
end

【讨论】：

很好，我忘记了 lib 文件夹。你会麻烦把供应商目录也扔在那里吗？
当然，添加了供应商目录。
确保您的 GemFile 中有 guard-livereload gem。
SCSS 文件中的额外 .css 现已弃用，Sprockets4 将不支持它：stackoverflow.com/questions/27537437/… 所以目前没有完全刷新的情况下无法注入 sass...

【解决方案2】：

我发现以下方法也很有效：

guard :livereload do
  watch(%r{^app/.+\.(erb|haml|js|css|scss|sass|coffee|eco|png|gif|jpg)})
  watch(%r{^app/helpers/.+\.rb})
  watch(%r{^public/.+\.html})
  watch(%r{^config/locales/.+\.yml})
end

这不是运行guard init livereload 时生成的默认代码，因为某些原因在 sass 导入中效果不佳。

【讨论】：

是的，如果您正确使用 SASS，您不希望您的部分编译为 css，因此您不能将它们命名为 *.css.scss。
我发布了这个相关问题以澄清这一点：stackoverflow.com/questions/12334515/…。因此，如果您有一个名为 _file.scss 的文件，并且在 @import "file"; 中使用了它，那么这种 livereload 策略是正确的，这些文件不应重命名为 _file.css.scss。
是的！这对我的帮助比任何其他例子都多。我正在使用资产管道与 SCSS 包含系统相结合。您的示例为我“开箱即用”。

【解决方案3】：

正如@mirko 在他的评论中提到的，scss 文件中的额外 .css 已被弃用。所以添加它不是一个很好的解决方案，而且我体验过简单地添加 scss 扩展会强制页面重新加载。

所以我发现这是可行的：

watch(%r{(app|vendor)(/assets/\w+/(.+)\.(scss))}) { |m| "/assets/#{m[3]}.css" }`

我的理解是这会将 scss 文件映射到已编译的 css 文件。我希望它也适用于 sass。

Source: Github Issue

【讨论】：