使用 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 ”的地方， 然后再调整。