压缩 javascript 和 css

2023-01-24 08:31:43

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

就可以了。

8. 关于调试时出现的问题：

如果发现某个JS 或者 CSS 文件是空白，  那么就删掉它们， 刷新页面。

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

刷新页面之后，就会看到新的 js, css 文件都已经生成了。

码农公寓

相关文章