DIV CSS 佈局教程網

目前我們項目中的 CSS/JS 文件比較多， 由於RAILS 3.0 沒有提供asset pipeline功能，所以這樣會制約我們的訪問速度。
例如：  目前，我們的布局( origin.html.erb ）頁面有 19 個JS文件，15個CSS文件。 每次打開都需要發送 34個 request，嚴重影響體驗。
所以，我們要把這些js, css 分別打包壓縮成一個文件。

參考： http://stackoverflow.com/questions/7112218/how-to-install-a-plugin-in-rails-3-getting-a-commands-is-not-a-module-typeerro/23507780#23507780

1. 編輯  Rakefile: 
  require File.expand_path('../config/application', __FILE__)
  require 'rake'
  # 增加這一行，注意位置。
  include Rake::DSL

2.編輯： script/rails:

  APP_PATH = File.expand_path('../../config/application',  __FILE__)
  require File.expand_path('../../config/boot',  __FILE__)
  # 增加這一行，注意位置。
  module Commands; end
  require 'rails/commands'

3.then run this command:

  $ bundle exec rails plugin install git://github.com/sbecker/asset_packager.git

4. 編輯： 新增一個 yml 文件， 把你用到的JS， CSS文件放到裡面去： $ cat config/asset_packages.yml

---
javascripts:
- base:
  - jquery-1.9.1.min
  - bootstrap.min
  - jquery-migrate-1.1.1
  - jquery-ui-1.10.1.custom.min
  - jquery-ujs-for-jquery-1.9
  - jquery.treeview
  - jquery.toastmessage
  - jquery-autocomplete-combobox
  - jquery.uploadify
  - jquery-ui-timepicker-addon
  - jquery.ui.datepicker-zh-CN
  - select2
  - select2_locale_zh-CN
  - global
  - jquery.tagit
  - jquery.validate
  - jqueryui-editable
  - jquery.ui.widget

stylesheets:
- base:
  - style
  - invalid
  - reset
  - jquery.treeview
  - jquery-ui-1.10.1.custom
  - jquery.toastmessage
  - jquery-autocomplete-combobox
  - uploadify
  - select2
  - jquery.tagit
  - jquery.validate
  - cms
  - jqueryui-editable
  - bootstrap.min
  - customized_bootstrap

5. 在 布局文件(origin.html.erb)中：

  <%= raw stylesheet_link_merged :base %>
  <%= raw javascript_include_merged :base %>

6. 編輯 .gitignore，增加這兩行（忽略掉他們）

public/javascripts/base_packaged.js
public/stylesheets/base_packaged.css

7. 最新發現： 壓縮後的 js 會在FIREFOX下面工作不正常。為了穩妥，我們只使用合並後的JS， 而不對其壓縮：

  # vim vendor/plugins/asset_packager/lib/synthesis/asset_package.rb
128       def create_new_build
              ......
              # 記得要修改這行代碼。 ( 使用merged_file ，而不是compressed_file ) 
133           #File.open(new_build_path, "w") {|f| f.write(compressed_file) }
134           File.open(new_build_path, "w") {|f| f.write( merged_file ) }
              ......
137       end

就可以了。

更多，見： https://github.com/sbecker/asset_packager

8. 關於調試時出現的問題：

如果發現某個JS 或者 CSS 文件是空白，  那麼就刪掉它們， 刷新頁面。

$ rm public/javascripts/base_packaged.js public/stylesheets/base_packaged.css

刷新頁面之後，就會看到新的 js, css 文件都已經生成了。
來源：http://www.iwangzheng.com