最近在改进自己做过的一个项目,在开发测试过程中感觉页面的打开时间比较久,看了下FIREBUG, 发现每次打开页面的时间,加载 js/css 居然用了5秒多。 所以下定决定,把rails3的 asset pipeline用上。
步骤记录在这里,供自己或其他人参考:
1. 使用3.2.0 版本的Rails. (只要支持 asset pipeline就好。)
$ vim Gemfile
9 #gem 'rails', '3.0.5'
10 gem 'rails', '3.2.0'
然后 $ rm Gemfile.lock
然后 $ bundle
2. 其他的 gem, 该调整的就调整。。。 >_< mysql2啥的。
gem 'mysql2', "0.3.11" # 使用大于0.3的版本。。。rails3.2
#gem "rake", "0.8.7" #去掉这个
gem 'jquery-rails' # 这个用来引用 jquery, jquery-ujs 这两个JS包
3. 保证原来的测试都通过。。。
$ bundle exec rake db:create RAILS_ENV=test
$ bundle exec rake db:schema:load RAILS_ENV=test
$ bundle exec rspec spec
4. 建立asset 所需要的文件夹:
$ mkdir app/assets
$ cp public/images app/assets/ -r
$ cp public/javascripts app/assets/ -r
$ cp public/stylesheets app/assets/ -r
5. 修改 layout 文件: vim app/views/layouts/application.html.erb
保证有这两行。
6 <%= stylesheet_link_tag "application", :media => "all" %>
7 <%= javascript_include_tag "application" %>
6. 编辑 app/assets/javascripts/application.js: 把内容用asset 可以理解的格式重新写一下。。。(原来的内容留着。。。)
2 //= require jquery
3 //= require jquery_ujs
4 //= require jquery-ui-1.8.18.custom.min.js
5 //= require photoshow
6 //= require tab_mod
7 //= require jquery.rsv
8 //= require validation_rules
9 //= require my_utilities
7. 编辑 app/assets/stylesheets/application.css
同上步,把原来的CSS 文件按照顺序组织好。 (顺序跟原来的一样,例如:)
1 /*
2 *= require_self
3 *= require jquery-ui-smoothness
4 *= require validation_message
5 *= require tablecloth
6 *= require ui.multiselect
7 *= require jquery.taghandler
8 *= require data_table_jui
9 *= require jquery.jgrowl
10 *= require customized
11 */
8. 重命名:把这两个文件都已 .erb 结尾。
9. 编辑: 这两个文件,把所有 src= , ulr() 的地方(也就是对图片的引用),都用 asset_path 来替换。
例如:
background:url(/images/header.gif) 0 0 repeat-x;
替换成:
background:url( <%= asset_path "header.gif" %>) 0 0 repeat-x;
10. 把其他相关的CSS, JS文件也修改了。。。
11. 修改config 目录:
11.1 config/application.rb ,增加下面几行
# Enable the asset pipeline
config.assets.enabled = true
# Version of your assets, change this if you want to expire all your assets
config.assets.version = '1.0'
11.2 config/environments/development.rb ,去掉下面这行:
# config.action_view.debug_rjs = true
11.3 config/environments/production.rb ,增加下面几行:
# Compress JavaScripts and CSS
config.assets.compress = false
# Don't fallback to assets pipeline if a precompiled asset is missed
config.assets.compile = false
# Generate digests for assets URLs
config.assets.digest = true
重启之后,人肉看一下测试结果。。。 一次搞对算是运气好,样式啥的不对也别怕。
12. 如何DEBUG:
1. 打开 FIREBUG ( or developer tools in chrome, safari...) 看看有没有出现JS错误。 有的话就调整。。。
2. 样式不对的话(例如少些个引号,引起的CSS不能被浏览器识别),就先校验一下CSS是否合理, 见:http://jigsaw.w3.org/css-validator/#validate_by_input 。 一般会给出很多个提示,找出其中 “Parse Error ”的地方, 然后再调整。
分享到:
相关推荐
Unity 使用 Play Asset Delivery 插件 com.google.play.assetdelivery-1.7.0.unitypackage unity 打包aab所使用的插件 可是使用它,解决谷哥安装包150m限制
AssetStudio.net472.v0.16.47
AssetStudio.v0.16.0中文版.zip
C#应用源码资料
Perfare版本的2019/06/16发布的Asset Studio 其地址如下: https://github.com/Perfare/AssetStudio/releases
Asset Hunter 可以分析你的项目,并为你提供易于理解的项目文件夹中未使用资源的概览。 这些结果被分组放入文件夹和文件类型中,让你可以轻松开始整理项目。 另外,它还列出该版本所用所有资源的未压缩大小,从而让...
financial asset pricing
AssetStudio unity资源查看工具,AssetsBundleExtractor unity资源提取工具。
网络规划和优化工具Asset由英国AIRCOM出品,很好用的网规工具。
Android中安装asset下的apk
AssetStudio unity解包工具
AssetStudio v0.14.38 Unity资源查看工具 从0.9以来更新的东西太多了,就提下主要的两个东西吧 支持动画导出(legacy, generic) 支持Unity版本到2018.2 说说目前动画导出几种方法,直接Export selected objects...
Maybe hard-to-understand asset you have imported? Want a solution that will help seamlessly, without bulky custom UI? We know that feel bro! Introducing Asset Usage Finder v4: Asset that will find...
unity3d asset server安装
Laravel开发-asset Laravel的资产经理。
AssetStudio v1.5 Unity资源查看工具exe,不需要你下载c++模块编译 可以编译也可以直接双击exe直接用,方便快捷好用安全 支持unity 5.0 untiy2017,2018,2019,2020等的assetbundle 解包,所有的功能应有尽有 支持...
vulkan_asset_pack_gltf.zip ...Vulkan C++ examples and demos 资源 资源原地址: http://vulkan.gpuinfo.org/downloads/vulkan_asset_pack_gltf.zip 因下载速度慢, 故此传至国内...下载后解压至工程中的 data/ 即可使用
Asset Explorer是ManageEngine旗下一款IT资产管理(ITAM)系统,可以帮助企业主动管理整个IT资产库,提供资产自动发现、资产跟踪、配置管理、软件许可管理、软件使用监控、采购与合同管理等功能,对资产的整个生命...
Feature 1 - Project Cleaner: 1、Actions for unused files 2、Enhanced Project View Feature 2 - Find References: 1、Find references, usages, relationships easily in Project or Scene ...