Assert Pipeline主要功能:
- 连接静态资源,减少渲染页面时浏览器发起的请求数。浏览器对并行的请求数量有限制,所以较少的请求数可以提升程序的加载速度。(主要是通过合并所有的js、css文件)
- 压缩静态资源
- 允许使用高级语言编写静态资源,如sass、coffee。它使用预处理器将高级语言编写的代码转换为真正的静态资源。
Assert Pipeline的使用:
Rails的静态文件可以放在多个位置:app/assets
,lib/assets
、 vendor/assets
以及.public
引入Assert Pipeline后,app/assert
文件夹下的静态资源会被Sprockets中间件处理。
处理过程是:生产环境中,Rails把预先编译好的文件保存在public/assert
文件夹下,从此,不再直接私服app/asserts
文件夹。
清单文件和指令
Sprockets 通过清单文件决定要引入和伺服哪些静态资源。
清单文件中包含一些指令,告知 Sprockets 使用哪些文件生成主 CSS 或 JavaScript 文件。
例如:app/assets/javascripts/application.js
文件,其内容如下:
// ...
//= require jquery
//= require jquery_ujs
//= require_tree .
该段代码要点:
- sprocket的指令以
//=
开头 - require指令告诉sprocket要加载的文件
- require指令不会多次加载同一文件
- 先require进来,先加载
- 文件加载路径: Sprockets 会搜索 apps/assets文件夹中的所有子文件夹
app/assets/javascripts/home.js
lib/assets/javascripts/moovinator.js
vendor/assets/javascripts/slider.js
vendor/assets/somepackage/phonebox.js
==>
//= require home
//= require moovinator
//= require slider
//= require phonebox
子文件引入清单:
app/assets/javascripts/sub/something.js
==>
//= require sub/something
子文件夹引入清单:
在 Sprockets 中,名为 index 的文件(扩展名各异)有特殊作用。
例如,程序中使用了Jquery代码库和许多jquery插件,都保存在lib/asserts/javascripts/library_name
文件中,那么lib/asserts/javascripts/library_name/index.js
文件的作用就是这个代码库的清单,可以在这个清单里按顺序列出所需的文件,或者干脆require_tree,然后再在主清单里添加
//= require library_name
- require_tree指令告诉sprocket递归加载指定文件夹中的所有JS文件
- require_tree引入的文件顺序不可预料
再来看看css清单:
/* ...
*= require_self
*= require_tree .
*/
-
require_self
指令:在这个位置导入这个文件中的样式。 - sass文件中请使用
@import
网友评论