Asset pipeline

[JiangYongKang]

What is asset pipeline?

用于连接、简化、压缩静态资源文件，如：JavaScript CSS CofferScript Sass ERB。而它是通过 sprockets-rails 这个 Gem 实现的。
GitHub 地址：https://github.com/rails/sprockets-rails

How to organize assets?

静态资源存放的位置

• app/assets 文件夹用于储存应用自有的静态资源文件，例如自定义图像、JavaScript 文件和 CSS 文件。
• lib/assets 文件夹用于储存自有代码库的静态资源文件，这些代码库或者不适合放在当前应用中，或者需要在多个应用间共享。
• vendor/assets 文件夹用于储存第三方代码库的静态资源文件，例如 JavaScript 插件和 CSS 框架。如果第三方代码库中引用了同样由 Asset Pipeline 处理的静态资源文件（图像、CSS 文件等），就必须使用 asset_path 这样的辅助方法重新编写相关代码。

如何引用资源文件

// app/assets/javascripts/home.js
//= require home

// lib/assets/javascripts/moovinator.js
//= require moovinator

// vendor/assets/javascripts/slider.js
//= require slider

// vendor/assets/somepackage/phonebox.js
//= require phonebox

// app/assets/javascripts/sub/something.js
//= require sub/something

静态资源的加载路径

通过在 Rails 控制台中检查 Rails.application.config.assets.paths 变量，我们可以查看搜索路径。

$ rails c
Running via Spring preloader in process 65665
Loading development environment (Rails 4.2.0)
irb(main):003:0> Rails.application.config.assets.paths.each { |path| puts path }
/Users/vincent/demo/app/assets/images
/Users/vincent/demo/app/assets/javascripts
/Users/vincent/demo/app/assets/stylesheets
/Users/vincent/demo/vendor/assets/javascripts
/Users/vincent/demo/vendor/assets/stylesheets
/Users/vincent/.rbenv/versions/2.2.1/lib/ruby/gems/2.2.0/gems/jquery-rails-4.3.1/vendor/assets/javascripts
/Users/vincent/.rbenv/versions/2.2.1/lib/ruby/gems/2.2.0/gems/coffee-rails-4.1.1/lib/assets/javascripts
/Users/vincent/.rbenv/versions/2.2.1/lib/ruby/gems/2.2.0/gems/turbolinks-source-5.0.3/lib/assets/javascripts

How does caching work for assets?

所有的资源文件都默认的被加载在 app/assets/javascripts/application.js 或者 app/assets/stylesheets/application.css 文件中。
执行 rails assets:precompile 命令可以预编译静态资源文件

$ rails assets:precompile
yarn install v1.2.1
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
info Lockfile not saved, no dependencies.
✨  Done in 0.04s.
I, [2017-11-02T14:35:11.039239 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-48e242c802bc1c1ff4f22b512e0cc49018bdddbceb47f2da7010dc7a1b5c8d15.js
I, [2017-11-02T14:35:11.050635 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-48e242c802bc1c1ff4f22b512e0cc49018bdddbceb47f2da7010dc7a1b5c8d15.js.gz
I, [2017-11-02T14:35:11.053435 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-961896ee152804be02f1f82f9e66a780981aaa888ef3315220e5aa24e815acc6.css
I, [2017-11-02T14:35:11.053579 #65969]  INFO -- : Writing /Users/vincent/development/strikingly-self-training-demos/advanced-rails-asset-pipeline-demo/public/assets/application-961896ee152804be02f1f82f9e66a780981aaa888ef3315220e5aa24e815acc6.css.gz

How to customize asset pipeline?

先在 Gemfile 文件中添加用于压缩的 Gem。

• https://github.com/AE9RB/closure-script/
• https://github.com/lautis/uglifier/
• https://github.com/sstephenson/ruby-yui-compressor/
• https://github.com/rails/sass-rails/

然后在 config/environments/production.rb 文件中添加或者修改压缩方式，比如采用 uglifier 进行压缩。

# config/environments/production.rb
config.assets.js_compressor = :uglifier