Learning Asset Pipeline

Asset Pipeline 的复习

概念

是什么

  • Asset pipeline 是一款压缩css 和js 的预处理工具。中间件叫Sprockets

目的

  • 降低连接次数
  • 有效建立缓存

构成

  • uglifier
  • sass-rails
  • coffee-rails

使用

静态资源放置 放在app/assets 文件夹中

引入资源

有两种方案

  1. 一次性引入所有文件 （使用require_tree）
  2. 只引用对应控制器的assets(不使用require_tree)
1
2

<%= javascript_include_tag params[:controller] %>
<%= stylesheet_link_tag params[:controller] %>

加载时搜索的路径

在使用静态资源的时候Sprockets 会再默认的三个位置中查找对应的文件 - apps/assets/(images|javascripts|stylesheets) - 也会寻找其他文件夹？

资源引用

1
2

//= require home (初级目录，不用加后缀)
//= require sub/something   （子目录）

使用Rails.application.config.assets.paths就可以看到所有的搜索路径

如果需要自定义路径，则需要在application.rb 增加配置

1

config.assets.paths << Rails.root.join("lib", "videoplayer", "flash")

app/assets 优先级别高一点

注意，如果清单文件没有包含某个需要引用的文件，则我们需要手动的将其加入在包含里 参见上面的代码

在Production 中的预处理

$ RAILS_ENV=production bin/rake assets:precompile

添加其他的mainfest 文件

1

Rails.application.config.assets.precompile += ['admin.js', 'admin.css', 'swfObject.js']

这个地方注意一下，这里的后缀不是文件的后缀 而是得到的文件的后缀( scss coffee)

将静态文件设置过期时间

因为已经生成了指纹，所以缓存时间可以设置成无限长

1
2
3
4
5
6
7
8

//nginx
location ~ ^/assets/ {
  expires 1y;
  add_header Cache-Control public;

  add_header ETag "";
  break;
}

1
2
3
4
5
6
7
8
9
10

# apache

# The Expires* directives requires the Apache module
# `mod_expires` to be enabled.
<Location /assets/>
  # Use of ETag is discouraged when Last-Modified is present
  Header unset ETag FileETag None
  # RFC says only cache for 1 year
  ExpiresActive On ExpiresDefault "access plus 1 year"
</Location>

Comments