# 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; } ~~~ 這是一款購買的商業字體，引用的時候： ~~~ <font face="Trajan Pro"><%= product.name %></font> ~~~ ### 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 的地址。