【Ruby on Rails】assets pipeline-极客日记

assets pipeline 是什么？

assets pipeline 提供了一个框架来连接和缩小或压缩 JavaScript 和 CSS 这些静态资源。它还增加了用其他语言和预处理器（如 CoffeeScript、Sass 和 ERB）编写这些静态资源的能力。它允许你的应用程序中的静态资源自动与来自其他 gem 的静态资源组合。例如，jquery-rails 包含 jquery.js 的副本并在 Rails 中启用 AJAX 功能。

传统给页面增加 js，css 的方式

一堆 CSS 罗列上去：

<link rel="stylesheet" href="./static/buttons.css">
<link rel="stylesheet" href="./static/normalize.css">
<link rel="stylesheet" href="./static/font-awesome/css/font-awesome.css">
<script src="./static/javascript/jquery.min.js"></script>
<script src="./static/javascript/jqueryui.min.js"></script>
<script src="./static/javascript/bootstrap.min.js"></script>

以上内容，会在页面打开时增加负担：多加载 N 个 http request(上面是 3 个 css, 3 个 js)。

一般的项目，往往会用到几十个 js.css.

所以，优化 HTML 页面的核心：减少 http 请求。

我们的 web 开发中, 最耗费时间的不是请求数据库，而是浏览器端跟服务器建立连接的过程。

传统，如何减少 js/ css 的请求？

多个同类型的文件，可以合并。

下面两个文件
buttons.css:

.green_button: {   color:  'green' }
.red_button: {   color:  'red' }
.yellow_button: {   color:  'yellow' }

normalize.css:

p { color: black  }
div { border:  0px; margin: 0px }

就可以合并成一个大文件：

.green_button: {   color:  'green' }
.red_button: {   color:  'red' }
.yellow_button: {   color:  'yellow' }
p { color: black  }
div { border:  0px; margin: 0px }

就是很简单的合并到一起，有冲突也没关系。哪个出现在下方，哪个就生效呗。

javascript 也是一样的。

Rails 中，是如何给多个 js/css 合并到一起的？

对于 js 文件

使用 application.js

全名：app/assets/javascripts/application.js

原来的代码：

<script src="./static/javascript/jquery.min.js"></script>
<script src="./static/javascript/jqueryui.min.js"></script>
<script src="./static/javascript/bootstrap.min.js"></script>

在 rails 当中，往往把所有的 js 文件，都放到 app/assets/javascripts 目录下。

然后, 在对应的 erb 页面中：

<%= javascript_include_tag 'jquery.min.js' %>
<%= javascript_include_tag 'jqueryui.min.js' %>
<%= javascript_include_tag 'bootstrap.min.js' %>

在 Rails 3.0 以后， Rails 提供了新的功能: assets pipeline, 我们就把上面的代码，统一写到 app/assets/javascripts/application.js 中：

//= require jquery.min.js
//= require jqueryui.min.js
//= require bootstrap.min.js

注意： //= require <文件名> 这个格式是固定的。多个空格都不行！

然后，在布局文件 app/views/layouts/application.html.erb 中，引用它：

<html>
<head>
  <%= javascript_include_tag 'application' %>
</head>
  ...
</html>

上面代码, 在 “开发模式 " 下, 就可以正确显示出我们引用的 javascript

对于 css 文件

把

<link rel="stylesheet" href="./static/buttons.css">
<link rel="stylesheet" href="./static/normalize.css">
<link rel="stylesheet" href="./static/font-awesome/css/font-awesome.css">

中的 css 文件，保存到 app/assets/stylesheets 目录下。

新增一个总体的 css 文件： app/assets/stylesheets/application.css

内容如下

/*
 *= require buttons.css
 *= require normalize.css
 *= require font-awesome.css
 */

注意：上面的 *= require 文件名的格式是固定的。多个空格都不行。

然后，在布局文件 app/views/layouts/application.html.erb 中，引用它：

<html>
<head>
  <%= stylesheet_link_tag 'application' %> </head>
  ...
</html>

如何压缩 css/js ？

需要一个命令

$ rails assets:precompile RAILS_ENV=production

rails assets:precompile: 压缩所有的 css, js, 以及为图片增加后缀。(方便服务器缓存)
RAILS_ENV=production: 指定你的环境

这个命令还会耗时大约几分钟。根据你的 CSS/JS 文件的数量，时间上有所不同。

压缩完之后，就会发现， public/assets 目录下，多出来两个文件，形如：

application-308d70d0bd03d91770479da196ec0827.css
application-308d70d0bd03d91770479da196ec0827.js

这两个文件, 就是把所有的 js, css 压缩到一起的文件了. 以后, 我们每次打开 WEB 页面时, 只发起这两个请求就够了

开发模式下，我们的页面加载，需要很多个 js， css 文件：

<link href="/assets/bootstrap.min.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/customized_bootstrap.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="all" rel="stylesheet" />
<link href="/assets/select2.min.css?body=1" media="all" rel="stylesheet" />
...
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/jquery.ui.core.js?body=1"></script>
<script src="/assets/jquery.ui.widget.js?body=1"></script>
<script src="/assets/jquery.ui.accordion.js?body=1"></script>
<script src="/assets/jquery.ui.position.js?body=1"></script>
<script src="/assets/jquery.ui.menu.js?body=1"></script>

在生产模式下，

<link href="/assets/application-ee1cf5e49ea54cc7b4cf3bef3be67d0c.css" media="all" rel="stylesheet" />
<script src="/assets/application-d45534ab0cd8c659530e2bebd7e60fbe.js"></script>

rails assets:precompile 需要在什么时候运行？

不需要每次部署都运行。
只在 production 环境下，才需要运行。
只在修改了 css/js 文件后，才需要运行。

目录CONTENT

【Ruby on Rails】assets pipeline