施用 asset pipleline的步骤

2012-08-30

使用 asset pipleline的步骤最近在改进自己做过的一个项目，在开发测试过程中感觉页面的打开时间比较久，看

使用 asset pipleline的步骤
最近在改进自己做过的一个项目，在开发测试过程中感觉页面的打开时间比较久，看了下FIREBUG，发现每次打开页面的时间，加载 js/css 居然用了5秒多。所以下定决定，把rails3的 asset pipeline用上。

步骤记录在这里，供自己或其他人参考：

1. 使用3.2.0 版本的Rails. （只要支持 asset pipeline就好。）
$ vim Gemfile
9 #gem 'rails', '3.0.5'
10 gem 'rails', '3.2.0'

然后 $ rm Gemfile.lock
然后 $ bundle

2. 其他的 gem，该调整的就调整。。。 >_< mysql2啥的。
gem 'mysql2', "0.3.11" # 使用大于0.3的版本。。。rails3.2
#gem "rake", "0.8.7"   #去掉这个
gem 'jquery-rails' # 这个用来引用 jquery, jquery-ujs 这两个JS包

3. 保证原来的测试都通过。。。
$ bundle exec rake db:create RAILS_ENV=test
$ bundle exec rake db:schema:load RAILS_ENV=test
$ bundle exec rspec spec

4. 建立asset 所需要的文件夹：
$ mkdir app/assets
$ cp public/images app/assets/ -r
$ cp public/javascripts app/assets/ -r
$ cp public/stylesheets app/assets/ -r

5. 修改 layout 文件： vim app/views/layouts/application.html.erb
保证有这两行。
6     <%= stylesheet_link_tag    "application", :media => "all" %>
7     <%= javascript_include_tag "application" %>

6. 编辑 app/assets/javascripts/application.js: 把内容用asset 可以理解的格式重新写一下。。。（原来的内容留着。。。)

2 //= require jquery
3 //= require jquery_ujs
4 //= require jquery-ui-1.8.18.custom.min.js
5 //= require photoshow
6 //= require tab_mod
7 //= require jquery.rsv
8 //= require validation_rules
9 //= require my_utilities

7. 编辑 app/assets/stylesheets/application.css

同上步，把原来的CSS 文件按照顺序组织好。（顺序跟原来的一样，例如：）

1 /*
2 *= require_self
3 *= require jquery-ui-smoothness
4 *= require validation_message
5 *= require tablecloth
6 *= require ui.multiselect
7 *= require jquery.taghandler
8 *= require data_table_jui
9 *= require jquery.jgrowl
10 *= require customized
11 */

8. 重命名：把这两个文件都已 .erb 结尾。
9. 编辑：这两个文件，把所有 src= , ulr() 的地方（也就是对图片的引用），都用 asset_path 来替换。

例如：
    background:url(/images/header.gif) 0 0 repeat-x;
替换成：
    background:url( <%= asset_path "header.gif" %>) 0 0 repeat-x;

10. 把其他相关的CSS， JS文件也修改了。。。

11. 修改config 目录：
11.1 config/application.rb ，增加下面几行

    # Enable the asset pipeline
    config.assets.enabled = true

    # Version of your assets, change this if you want to expire all your assets
    config.assets.version = '1.0'

11.2 config/environments/development.rb ，去掉下面这行：
    # config.action_view.debug_rjs             = true

11.3 config/environments/production.rb ，增加下面几行：
    # Compress JavaScripts and CSS
    config.assets.compress = false

    # Don't fallback to assets pipeline if a precompiled asset is missed
    config.assets.compile = false

    # Generate digests for assets URLs
    config.assets.digest = true

重启之后，人肉看一下测试结果。。。一次搞对算是运气好，样式啥的不对也别怕。

12. 如何DEBUG：
1. 打开 FIREBUG （ or developer tools in chrome, safari...) 看看有没有出现JS错误。有的话就调整。。。
2. 样式不对的话（例如少些个引号，引起的CSS不能被浏览器识别），就先校验一下CSS是否合理，见：http://jigsaw.w3.org/css-validator/#validate_by_input 。一般会给出很多个提示，找出其中 “Parse Error ”的地方，然后再调整。

热点排行

行业软件

施用 asset pipleline的步骤