压缩 javascript 和 css

www.iwangzheng.com

 

 目前我们项目中的 CSS/JS 文件比较多, 由于RAILS 3.0 没有提供asset pipeline功能,所以这样会制约我们的访问速度。
例如:  目前,我们的布局( origin.html.erb )页面有 19 个JS文件,15个CSS文件。 每次打开都需要发送 34个 request,严重影响体验。
所以,我们要把这些js, css 分别打包压缩成一个文件。

参考: http://*.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 文件都已经生成了。

压缩 javascript 和 css,布布扣,bubuko.com

压缩 javascript 和 css

上一篇:【Java每日面试题】Iterator迭代器到底是什么?(上)


下一篇:Java synchronized 总结