Rails:使用带有资产管道的livereload

Quick question for rails pros out there...

对rails专业人员的快速提问…

When working with Rails 3.0.x apps I was a heavy user of Guard and LiveReload. However, it seems that when using the asset pipeline in Rails 3.1 the livereload guard does not know that changes to a Sass file should trigger sending new css to the browser.

当使用Rails 3.0时。x应用程序我是一个严重的保安和利弗拉格的用户。然而，在使用Rails 3.1中的资产管道时，livereload警卫似乎不知道对Sass文件的更改应该会触发向浏览器发送新的css。

Is anyone using LiveReload with the Asset Pipeline? If so, how are you making it work?

有谁在使用利物浦的资产管道吗?如果是的话，你是怎么做到的呢?

Thanks!

谢谢!

3 个解决方案

#1

After following some issue threads on Github I found the following fixed my problem:

在Github上关注了一些问题之后，我发现下面的问题解决了:

1) Make sure all scss files are named following the new asset convention, like so: filename.css.scss

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

I was using scss before Rails 3.1 and had just named all my sass files filename.scss.

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

2) Use the following for livereload in your guardfile:

2)在你的守卫档案中使用以下物品:

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

#2

I have found the following to work quite well too:

我发现下面的方法也很有效:

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

This is not the default code that is generated when you run guard init livereload as for some reason that does not work so well with sass imports.

这不是在运行保护init livereload时生成的默认代码，因为某些原因，它在sass导入中不能很好地工作。

#3

As @mirko mentioned in his comment, extra .css on scss files is deprecated. So adding that isn't a great solution, and I've experienced that simply adding the scss extension forces a page reload.

正如@mirko在他的评论中提到的，不赞成在scss文件上添加.css。所以添加这个并不是一个很好的解决方案，我的经验是，仅仅添加scss扩展就会强制页面重载。

So I found that this works:

所以我发现这是可行的:

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

My understanding is this maps the scss file to the compiled css file. I hope it works for sass too.

我的理解是，这将scss文件映射到已编译的css文件。我希望这对sass也有效。

Source: Github Issue

来源:Github的问题

#1