Assets 管理
最后更新于：2022-04-01 22:45:11
# 6.1 Assets 管理
## 概要：
本课时讲解如何管理 Rails 中的 css，js 等静态文件。
## 知识点：
1. assets 编译
1. 静态文件
1. cdn
## 正文
当第一次用 production 运行 Rails 时（`rails s -e production`），很可能提示找不到资源：
因为我们还没有 `编译` 这些静态资源，说`编译`是因为 Rails 默认使用了 [sprockets-rails](https://github.com/rails/sprockets-rails) 这个 gem 来管理 Assets 文件。
### 6.1.1 Assets 管理
Rails 的 Assets 包括已经看到的 stylesheets，javascript 和 images，我们还可以增加 fonts。`sprockets-rails` 提供了几个管理这些资源的 Rake 任务。其中最常用的是 `rake assets:precompile`。它的含义是，编译所有在 `config.assets.precompile` 中定义的资源。
Rails 默认加载 `app/assets`, `lib/assets` 和 `vendor/assets` 中的文件到 precompile 路径中。我们引用这些资源文件的文件，叫 `manifest file`，可以理解为白名单。这里有两个引用命令：
`app/assets/styleshetts/application.css`
~~~
*= require_self
*= require_tree .
~~~
这是一种简单的引用，`require_self` 会先加载自身定义的内容，然后加载其他所有目录下的文件，也就是 `require_tree .` 中可以找到的文件。但是，我们引用的是 bootstrap 文件，它有变量文件，而 `require_tree` 命令不一定会优先编译这个变量文件，所以会出现：
~~~
Less::ParseError: variable @navbar-default-bg is undefined
~~~
这样的错误。而且当项目的 assets 文件越来越多，引用的各种 sass 文件和 less 文件存在互相覆盖的时候，`require_tree` 会让这种引用杂乱，且文件臃肿庞大。
这时我们可以明确引用的文件，比如：
~~~
*= require_self [1]
*= require simplex/loader
*= require simplex/bootswatch
*= require bootstrap_and_overrides
~~~
如果我们在该文件里不写其他 css，可以把 [1] 去掉。
如果我们在 `application.css` 中写了一些 css，又 require 了其他文件，如果不使用 `require_self`，编译文件中我们写的 css 不是出现在顶部而可能出现在底部。`require_self` 会保持编译结果顺序和引用顺序相同。
这样运行该命令，会把这些资源编译到 `public/assets` 目录下。那么，其他没有没有在此被引入，而也要使用的文件，该如何被编译呢？
Rails 4 将 assets 的配置文件单独放置在 `config/initializers/assets.rb` 中：
~~~
Rails.application.config.assets.precompile += %w( products.js )
Rails.application.config.assets.precompile += %w( cerulean.js cerulean.css )
~~~
`products.js` 文件中定义了两个方法，它只在一个页面上使用，就没必要编译到整体文件里，只要在需要它的页面引用即可：
`app/views/products/index.html.erb`
~~~
<%= javascript_include_tag "products" %>
~~~
总结一下，使用 白名单加载的 assets 文件，可以认为是 “编译+合并” 模式，这适合全局都使用的css 和 js。单独写入 `config.assets.precompile` 的文件是局部引用。
### 6.1.2 使用字体
因为我们把 bootstrap 中定义的变量放到了 assets 下，所以需要单独引用 bootstrap 3 中使用的 `Glyphicons` 字体：
~~~
@font-face {
font-family: 'Glyphicons Halflings';
src: font-url('glyphicons-halflings-regular.eot');
src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-url('glyphicons-halflings-regular.woff') format('woff'),
font-url('glyphicons-halflings-regular.ttf') format('truetype'),
font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
~~~
如果不做任何修改，则不必再次引用，gem 会自动把它们包含进来。
如果使用新的字体或图标，需要把新字体文件放到 `assets/fonts` 中，然后定义：
~~~
@font-face {
font-family: 'Trajan Pro';
font-style: normal;
src: font-url('trajan_pro/trajan_pro.woff');
src: font-url('trajan_pro/trajan_pro.eot?#iefix') format('embedded-opentype'),
font-url('trajan_pro/trajan_pro.woff') format('woff'),
font-url('trajan_pro/trajan_pro.ttf') format('truetype'),
font-url('trajan_pro/trajan_pro.svg#Regular') format('svg');
font-weight: normal;
font-style: normal;
}
~~~
这是一款购买的商业字体，引用的时候：
~~~
<%= product.name %>
~~~
### 6.1.3 CDN
如果我们不引用编译的文件，直接使用 `application.js` 和 `application.css` 不可以么？这在开发环境下自然没问题，但是在产品环境下，尤其遇到缓存和 cdn 时，会造成加载缓慢，无法及时清理过期时间的问题。
首先，Rails 默认启用了 assets 的 digest 选项，这样编译文件的时候，会带有 md5 字符，形象的叫做 `指纹`。当我们修改内容之后，其该值会变动，生成新的文件名，并且编译最新的文件。如果我们用 nginx 来作为 web server，可以针对这种文件设置缓存，如果使用外部 cdn，可以把最新的文件发布到 cdn 中（回源模式会自动从服务器读取，无需发布）。
在 nginx 的配置：
~~~
location ~ ^/assets/ {
expires 1y;
add_header Cache-Control public;
add_header ETag "";
break;
}
~~~
在产品环境使用 cdn 时，需要更改配置：
~~~
config.action_controller.asset_host = "http://cdn.domain.com"
~~~
当使用 xxx_url 这个 routes helper 时，会自动带上 cdn 的地址。
';