如何在Rails中启用自动代码重新加载

Question

如何在Rails中启用自动代码重新加载

htmlcssruby-on-rails

15

在开发环境中，Rails 应用程序是否有一种方式可以实现“热代码重载”？

例如：我正在开发一个 Rails 应用程序，我在样式表中添加了几行 CSS，我需要查看浏览器以查看修改后的样式。目前我必须使用 cmd-r 或单击刷新按钮来刷新页面。

是否有一种方法可以在更改时自动重新加载页面？

这在 Phoenix Web 框架中非常有效（我相信 Phoenix 不是唯一具有此功能的框架）。如何在 Ruby on Rails 中启用此类功能？

- Andrew Hendrie

你是否找到了Rails中CSS实现热重载的解决方案？ - Marklar

3个回答

4

通过使用guard与livereload的组合，可以实现在HTML/JS更改时进行CSS热替换和自动重新加载：https://github.com/guard/guard-livereload

- Matt

1

这个宝石会在您更改 js 元素时自动重新加载（不包括 css 或 ruby 文件）。

https://github.com/rmosolgo/react-rails-hot-loader

我从未在Rails平台上见过CSS热代码重新加载。

- Albert Paul

2

很好 - 这对于在 Rails 中自动重新加载 JavaScript 很有用。不过我正在寻找至少能够自动重新加载整个 asset pipeline 的东西（JS 和 CSS - 自动重新加载模型、控制器和视图也很不错）。 - Andrew Hendrie

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gustavoanalytics · Accepted Answer

我正在使用这个设置重新加载所有资产、js、css和ruby文件

Gemfile中

group :development, :test do
  gem 'guard-livereload', '~> 2.5', require: false
end

group :development do
 gem 'listen'
 gem 'guard'
 gem 'guard-zeus'
 gem 'rack-livereload'
end

请在你的development.rb文件中插入此代码。

config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload

我在我的 Guard 文件中有这个配置

# A sample Guardfile
# More info at https://github.com/guard/guard#readme

## Uncomment and set this to only include directories you want to watch
# directories %w(app lib config test spec features) \
#  .select{|d| Dir.exists?(d) ? d : UI.warning("Directory #{d} does not exist")}

## Note: if you are using the `directories` clause above and you are not
## watching the project directory ('.'), then you will want to move
## the Guardfile to a watched dir and symlink it back, e.g.
#
#  $ mkdir config
#  $ mv Guardfile config/
#  $ ln -s config/Guardfile .
#
# and, you'll have to watch "config/Guardfile" instead of "Guardfile"

guard 'livereload' do
  extensions = {
    css: :css,
    scss: :css,
    sass: :css,
    js: :js,
    coffee: :js,
    html: :html,
    png: :png,
    gif: :gif,
    jpg: :jpg,
    jpeg: :jpeg,
    # less: :less, # uncomment if you want LESS stylesheets done in browser
  }

  rails_view_exts = %w(erb haml slim)

  # file types LiveReload may optimize refresh for
  compiled_exts = extensions.values.uniq
  watch(%r{public/.+\.(#{compiled_exts * '|'})})

  extensions.each do |ext, type|
    watch(%r{
          (?:app|vendor)
          (?:/assets/\w+/(?<path>[^.]+) # path+base without extension
           (?<ext>\.#{ext})) # matching extension (must be first encountered)
          (?:\.\w+|$) # other extensions
          }x) do |m|
      path = m[1]
      "/assets/#{path}.#{type}"
    end
  end

  # file needing a full reload of the page anyway
  watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
  watch(%r{app/helpers/.+\.rb})
  watch(%r{config/locales/.+\.yml})
end

guard 'zeus' do
  require 'ostruct'

  rspec = OpenStruct.new
  # rspec.spec_dir = 'spec'
  # rspec.spec = ->(m) { "#{rspec.spec_dir}/#{m}_spec.rb" }
  # rspec.spec_helper = "#{rspec.spec_dir}/spec_helper.rb"

  # matchers
  # rspec.spec_files = /^#{rspec.spec_dir}\/.+_spec\.rb$/

  # Ruby apps
  ruby = OpenStruct.new
  ruby.lib_files = /^(lib\/.+)\.rb$/

  # watch(rspec.spec_files)
  # watch(rspec.spec_helper) { rspec.spec_dir }
  # watch(ruby.lib_files) { |m| rspec.spec.call(m[1]) }

  # Rails example
  rails = OpenStruct.new
  rails.app_files = /^app\/(.+)\.rb$/
  rails.views_n_layouts = /^app\/(.+(?:\.erb|\.haml|\.slim))$/
  rails.controllers = %r{^app/controllers/(.+)_controller\.rb$}

  # watch(rails.app_files) { |m| rspec.spec.call(m[1]) }
  # watch(rails.views_n_layouts) { |m| rspec.spec.call(m[1]) }
  # watch(rails.controllers) do |m|
  #   [
  #     rspec.spec.call("routing/#{m[1]}_routing"),
  #     rspec.spec.call("controllers/#{m[1]}_controller"),
  #     rspec.spec.call("acceptance/#{m[1]}")
  #   ]
  # end
end

我在这个设置中使用 Zeus 而不是 Spring。

运行 guard。

打开 localhost:3000，然后就可以开始了。

这应该解决您的问题，并且具有比 browserify 更快的炽热重新加载时间。

如果您正在进行 TDD，则可以取消注释以查看测试目录中的 Guard。