压缩 javascript 和 css
2024-08-20 17:21:56
www.iwangzheng.com
目前我们项目中的 CSS/JS 文件比较多, 由于RAILS 3.0 没有提供asset pipeline功能,所以这样会制约我们的访问速度。
例如: 目前,我们的布局( origin.html.erb )页面有 19 个JS文件,15个CSS文件。
每次打开都需要发送 34个 request,严重影响体验。
所以,我们要把这些js, css 分别打包压缩成一个文件。
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 文件都已经生成了。
最新文章
- java,H5微信蓝牙设备开发教程申请设备和添加设备(2)
- Docker之Web-UI
- Python操作Excel
- Html.ActionLink , Url.Action
- 学习练习 java 输入输出流练习2
- 286.	Walls and Gates
- android标题栏(titlebar)显示进度条
- Objective-C 【@property 的参数问题】
- Oracle NULLIF函数
- iOS开发手记 - iOS9.3 UINavigationController添加后不显示storyboard中viewcontroller里的控件的解决方法
- Git基础教程
- 【ASP.NET MVC】View与Controller之间传递数据
- 在嵌入式设备中使用 JavaScript 的前景
- flex布局之flex-basis采坑
- BZOJ.2437.[NOI2011]兔兔与蛋蛋游戏(二分图博弈 匈牙利)
- NRF24L01模块配置
- cmake条件编译
- Nova 通过Python API 查询,创建,删除flavor
- 一、html
- Effective C++ 条款10:令operator= 返回一个reference to *this