【问题标题】:How do I keep Rails in development mode from concatenating stylesheets and javascripts?如何让 Rails 处于开发模式,避免连接样式表和 javascript?
【发布时间】:2022-10-14 07:59:39
【问题描述】:

我在开发模式下使用 Rails 6.1:

root@19ababcf7904:/app# bin/rails s -b 0.0.0.0 -p 3001
=> Booting Puma
=> Rails 6.1.7 application starting in development 
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 5.6.5 (ruby 3.1.2-p20) ("Birdie's Version")
*  Min threads: 5
*  Max threads: 5
*  Environment: development
*          PID: 968
* Listening on http://0.0.0.0:3001
Use Ctrl-C to stop

据我所知,资产管道处于调试模式:

config/environments/development.rb

...
  # Debug mode disables concatenation and preprocessing of assets.
  # This option may cause significant delays in view rendering with a large
  # number of complex assets.
  config.assets.debug = true
...

但是当我查看我的网页时,我得到了一个调试资产/样式表:

<link rel="stylesheet" media="all" href="/assets/application.debug-2bae18e528fb2c4b71218acd2f684fc542e57e7b3ab5eae5d2e1e7f6f50cf042.css" data-turbolinks-track="reload">

这是视图位:

    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

无论是否列出了 Webpacker 或 Turbolinks,我仍然得到一个串联的 application.css。

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '3.1.2'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.3', '>= 6.1.3.2'

gem 'pg'

# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false

gem 'slim-rails', '~> 3.2.0'
gem 'haml', '~> 6.0', '>= 6.0.3'

gem 'devise', '4.8.0'
gem 'recaptcha', '~> 5.12.0'

gem 'typhoeus', '~> 1.4.0'

gem 'simple_form', '~> 5.1.0'

gem 'sidekiq', '~> 6.5.7'

gem 'twitter-text', '~> 3.1.0'

gem 'grape', '~> 1.6.0'
gem 'grape_on_rails_routes', '~> 0.3.2'

gem 'net-smtp', '~> 0.3.1'
gem 'net-pop', '~> 0.1.1'
gem 'net-imap', '~> 0.2.3'

gem 'activeadmin', '~> 2.12.0'
#gem 'kaminari', '~> 1.2.2'
#kaminari-actionview
#kaminari-activerecord
#kaminari-core

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]

  gem 'rspec-rails', '~> 5.0.0'

  gem 'pry'
  gem 'pry-nav'
  gem 'pry-rails'

  gem 'factory_bot_rails', '~> 6.2.0'
  gem 'faker', '~> 2.18.0'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'solargraph'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'

  gem 'turnip'

  gem 'shoulda-matchers', '~> 4.0'
  gem 'shoulda-callback-matchers', '~> 1.1.4'
  gem 'webmock', '~> 3.14.0' 
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

关于制作铁轨,我真的不知道该怎么做不是结合我在开发中的资产。至少,我不希望 Rails 在开发中编译样式表。

【问题讨论】:

    标签: ruby-on-rails ruby-on-rails-6 sprockets


    【解决方案1】:

    讨论

    链轮

    这很令人困惑,因为受影响项目之间的消息传递是不同的。似乎 Sprockets 4 现在默认连接所有内容并使用 Source Maps 来帮助调试:

    https://github.com/rails/sprockets/blob/main/UPGRADING.md#source-maps

    链轮导轨

    链轮导轨项目在此提交中更新了其文档,删除了单个文件部分并添加源图部分:

    https://github.com/rails/sprockets-rails/commit/d267d6dea7b79518e231bd362947e265fa3da32f

    - Enable expanded asset debugging mode. Individual files will be served to make referencing filenames in the web console easier. **This feature has been replaced by Source Maps and does nothing in Sprockets 4+.**
    + Enable asset debugging mode. A source map will be included with each asset when this is true.
    

    导轨导轨

    Rails 6.1 资产管道指南说: https://guides.rubyonrails.org/v6.1/asset_pipeline.html#in-development

    在开发模式下,资产按照清单文件中指定的顺序作为单独的文件提供。

    然而,Rails 7 指南说: https://guides.rubyonrails.org/asset_pipeline.html#in-development

    在开发模式下,资产作为连接文件提供。

    相关的拉取请求: Update Asset Pipeline Guide to describe how Sprockets 4 works

    轨道生成器

    Rails 7 生成器不再具有config.assets.debug默认列出的选项: https://github.com/rails/rails/blob/main/railties/lib/rails/generators/rails/app/templates/config/environments/development.rb.tt

    解决方案

    降级到 Sprockets 3

    把它放在你的 Gemfile 中,一切都应该像以前一样,在开发者控制台中显示单个文件:

    gem 'sprockets', '~> 3'
    

    注意:阅读本文以了解您将在 Sprockets 4.x 中遗漏的内容: https://github.com/rails/sprockets#upgrading-to-sprockets-4x

    不要连接文件

    我没有看到在 Sprockets 4 中关闭串联的简单方法。作为替代方案,您可以单独要求您的资产;例如,删除这一行:应用程序/资产/样式表/application.css

     *= require_tree .
    

    然后,您将单独包含您的其他 CSS/SCSS 文件stylesheet_link_tag

    源地图

    放弃并使用 Source Maps。不幸的是,我发现在 Sprockets 4 和 Chrome 控制台中使用源映射有问题。如果你走这条路,这里有一个相关的讨论:

    sprockets 4 makes Chrome browser identification of SCSS css lines worse #656

    尚未发布的可能修复:

    Add source map on debug mode with Sprockets 4 #162

    禁用启用 CSS 源映射在 Chrome 控制台中可能会提供目前最好的调试体验。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2010-10-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-08-13
      • 2014-08-07
      • 2014-11-13
      相关资源
      最近更新 更多