压缩 javascript 和 css

www.iwangzheng.com

目前我们项目中的 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 文件都已经生成了。