压缩 javascript 和 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 文件都已经生成了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注