Ruby On Rails

Rails Asset Pipeline

介绍

什么是Asset Pipeline

Asset Pipeline是Rails用来合并，压缩，混淆css和js资源文件的框架

主要功能

合并资源文件

Asset Pipeline可以将多个资源文件(css, js)合并成一个文件。浏览器有请求并发数量限制，同时每个http请求建立断开链接也有一定开销，当单个页面引用的资源文件比较多时，这些限制和开销会造成页面加载时间变长。Asset Pipeline通过资源文件自动合并来减少浏览器http请求，间接减少页面加载时间。

文件压缩

css，js文件一般都包含很多空格，换行，注释，这些内容对浏览器来说没有任何用处，但是它们的存在一定程度上使资源文件变大，增加资源文件下载时间。

由于js文件内容 Asset Pipeline同时会把js文件做内容混淆，通过修改变量、函数名称等方法使得js文件内容不可读，减小代码泄露的风险

生成文件唯一标识

基于文件内容给资源文件生成一个唯一的文件名，当文件内容有变动的时候，生成的文件名称也会修改，文件的唯一标识有以下好处

  1. 对缓存友好，当文件内容有变动的时候不需要考虑浏览器旧的缓存
  2. 可以同时保存多个文件版本，当多个服务器更新不同步的时候，不同的文件版本同时存在能保证多个服务器页面正常

兼容多种语言语法

支持sass, less语法写css文件，coffescript语法写js文件，同时支持erb写css和js, 无需手动转换，在资源编译阶段，自动转换

使用Asset Pipeline

配置编译文件

在config/initializers/assets.rb文件中配置

1
Rails.application.config.assets.precompile += %w( admin.js admin.css )

定义资源文件

JavaScript文件

1
2
3
4
5
//= require jquery
//= require jquery_ujs
//= require jquery.Jcrop
//= require bootstrap
//= require_tree // 加载同目录下所有js文件

css文件

1
2
3
4
5
/*
*= require bootstrap
*= require_self // 加载自身css内容,用于调整合并后的文件内容顺序
*= require_tree . // 加载同目录下所有css文件
*/

资源文件引入

javascript

1
2
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'admin' %>

css

1
2
<%= stylesheet_link_tag 'application' %>
<%= stylesheet_link_tag 'admin' %>

image

1
<%= image_tag 'backgroud.png' %>

其它文件

1
<%= asset_path 'backgroud.png' %>

css样式文件中应用

如果css文件中需要使用背景图片，希望用到asset pipeline，可以在.css.erb文件中使用erb语法

1
.class { background-image: url(<%= asset_path 'backgroud.png' %>) }

文件组织

Asset Pipeline要求资源文件放在app/assets, lib/asset或者vendor/assets目录下，然后根据文件的不同类型放到images, javascripts, stylesheets目录下

按照惯例

  • app/assets 存放应用独有的资源文件，比如自定义的图片样式和脚本
  • lib/assets 存放应用产生的，但是希望能够提取出来被其它应用使用的资源文件
  • vendor/assets 存放第三方插件使用到的资源文件

编译文件

生产环境执行命令

1
RAILS_ENV=production bin/rails assets:precompile