[ruby on rails] Asset precompile

Assets Pipeline 主要功能 & 特性

1. 合并、压缩、解析 css, js 文件。主要通过 Sprockets 完成

• 合并：将多个 js 或 css 文件压缩打包成单一文件，減少 http request 的大小与数量。
• 压缩：可以去除空格、注释等。
• 解析：你可直接使用 SCSS 和 CoffeeScript, 它们会被解析成 css 和 js.

2. 不使用Assets Pipeline

rails new appname --skip-sprockets

Assets 路径

你可以在终端中Rails.application.config.assets.paths来查看所有的资产路径

Assets 中的 js

js载入

以app/asset/javascripts/application.js这支档案为例，这是一份清单档案，主要告诉链轮说哪些档案是要被载入最后要被包起来压缩的，最后这支档案所有里面的东西就会被包分类中翻译application.js这支档案，我们也是layout/application.html.erb中的javascript_include_tag 'application'中的档案，打开这支档案除了上面的说明外只有这三行：

//= require jquery
//= require jquery_ujs
//= require_tree .

上面两行很明显的就是要载入jquery以及jquery_ujs这两个档案，这两个支持档案有他的原因是被包含在我们的Gem中，而下面那行require_tree .表示是三个把assets/javascript目录下的档案故事孩子内的档案都包目录，这时候你一定会知道，如果有js 的案例，css 我会在特定页面中使用特定的页面，例如使用日常办事，比如说我们假想的管理员功能.js 的档案需求在我们的后台使用，有两种方法可以使用：

1. 你可以将require_tree的改成其他目录，例如在app/assets/javascript目录下建个共同资料夹，把require_tree .改require_tree ./common这样子所产生的应用。js这支档案就不会成目录admin_functions.js这支档案。

2. 你可以建立一个新的资料夹来放你不想要被application.js中载入的档案，我们例如在app/assets/javascript下建立一个管理资料夹把刚刚的admin_functions.js档案放进去，然后把原先的application.js的中require_tree .改为require_directory .这样子找到抓与应用。js 同目录下的所有档案而不会去载入子目录中的档案。

3. 最後再建立另外一支 manifest 用來 import 那些我們要獨立出來的 assets，例如我們建立一支 admin.js 的檔案用來載入其他功能，一樣使用 require_tree 或是 require_directory 的方式來載入，然後在你需要用到的頁面中使用 javascript_include_tag ‘admin’ 來存取。

千千万万要记得，当你使用 application.js 以外的清单档案时，一定要在你环境设定档中将这支档案加入预编译的清单，否则就可以开始分期制作了堆500错误XXXX未预编译，加入的位置在环境设置档次生产.rb中的config.assets.precompile += %w( search.js )中。

require # 引入某个文件。如果有重复引入，它会自动忽略，只引入一次。
require_directory # 引入某个目录下的文件，不会递归其子目录。
require_tree # 引入某个目录及递归其子目录下的所有文件，默认指的是当前目录。
require_self # 引入在自己文件里写的样式或脚本。

• require [路径]载入某支特定的档案，如果这档案被载入多年，Sprockets 也会很聪明的只记得载入一次。
• include[路径]与require一样，生日在生日是被载入过的档案也会再被载入。
• require_directory [将路径下不包含子目录的档案按照文字顺序汇总。
• require_tree [路径] 爱心路径下包含子目录的档案全部载入。
• require_self [路径] 告诉 Sprockets 再载入其他的档案前，先将自己的内容插入。
• depend_on [路径]宣布依赖于某某js，在需要通知某支快取的资产到期时非常实用。
• stub [路径] 将路径中的资产加入黑名单，其他的都不需要他加载。

css中图片背景图

css

• css 文件改成 .css.erb

.logo { background: url(<%= asset_path 'banner09.png' %>) }
  # => background: url(/assets/banner09-5b89fba0c9ab…bc8553d0fc418d4362c5666cb8dfd06ac09a213cd96d6.png)

.logo { background: url(<%= asset_data_uri 'banner09.png' %>) }
  # => background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AA…ChkZn%2FP8CDADo5RSmqD%2B84QAAAABJRU5ErkJggg%3D%3D)

scss

• 使用image-url 或者 asset-url

.logo { background: image-url("banner09.png") }  
  # => background: url(/assets/banner09-5b89fba0c9ab…bc8553d0fc418d4362c5666cb8dfd06ac09a213cd96d6.png)
.logo { background: image-path("banner09.png") }  
  # => background: "/assets/banner09-5b89fba0c9ab…bc8553d0fc418d4362c5666cb8dfd06ac09a213cd96d6.png"
.logo { background: asset-url("banner09.png", image) }
  # => background: url(/assets/banner09-5b89fba0c9ab…bc8553d0fc418d4362c5666cb8dfd06ac09a213cd96d6.png)
.logo { background: asset-path("banner09.png", image) }
  # => background: "/assets/banner09-5b89fba0c9ab…bc8553d0fc418d4362c5666cb8dfd06ac09a213cd96d6.png"

Rails server 处理静态文件

• environments/production.rb

config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present?
 改成 config.public_file_server.enabled = true  # 管理webpack编译的
	
config.assets.compile = false 改成true  # 管理sprockets编译的

Nginx 处理静态文件

• 重点是root要放在location外，并指定正确的public路径（cap部署，在current/public)

upstream realwols{
  server unix:///root/realwols-web/shared/tmp/sockets/puma.sock;
}
server {
  listen 80;
  server_name localhost;
  root /root/realwols-web/current/public;
  location / {
    proxy_pass http://realwols;
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host:$server_port;
  }
  location ~ ^/assets|packs/ {
    expires 1y;
    add_header Cache-Control public;
    add_header ETag "";
    break;
  }
}

如果production能找到jpg，png图，找不到jpeg图

• assets.rb中加配置

   config.assets.precompile += %w(.jpeg)