使用 asset pipleline的步骤

访问量: 761

最近在改进自己做过的一个项目,在开发测试过程中感觉页面的打开时间比较久,看了下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 ”的地方, 然后再调整。
 

订阅/RSS Feed

Subscribe

分类/category