此文为全部转载,http://www.makaidong.com/%E5%8D%9A%E5%AE%A2%E5%9B%AD%E6%96%87/30104.shtml
rails 4.0 -- production环境配置之解决无法加载css或js
最近配置production环境,找了好几份文档,从傻逼到苦逼~~终于配置成功~~@_@!!!
首先,先加载以下几个插件:
# use uglifier as compressor for javascript assets
gem 'uglifier', '>= 1.3.0'
# use coffeescript for .js .coffee assets and views
gem 'coffee-rails', '~> 4.0.0'# use jquery as the javascript library
gem 'jquery -rails'
gem 'execjs '
# turbolinks makes following links in your web application faster. read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# use scss for stylesheets
gem 'sass-rails', '~> 4.0.0'
接着修改config/environment/production.rb,部分代码如下:
# disable rails's static asset server (apache or nginx will already do this).
config.serve_static_assets = true
# compress javascripts and css.
config.assets.compress = true
config.assets.js _compressor = :uglifier
config.assets.css_compressor = :sass
# do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
# generate digests for assets urls.
config.assets.digest = true
接着在config/application.rb中添加下面代码:
1 config.assets.precompile << proc.new do |path|
2 if path =~ /\.(css|js |scss|png|jpg|gif|js on)\z/
3 full_path = rails.application.assets.resolve(path).to_path
4 app_assets_path1 = rails.root.join('app', 'assets').to_path
5 app_assets_path2 = rails.root.join('public', 'assets').to_path
6 app_assets_path3 = rails.root.join('vendor', 'assets').to_path
7
8 if full_path.starts_with? app_assets_path1
9 true
10 else
11 if full_path.starts_with? app_assets_path2
12 true
13 else
14 if full_path.starts_with? app_assets_path3
15 true
16 else
17 false
18 end
19 end
20 end
21 end
22 end
如果有其他文件需要添加的,上面代码自行修改添加。
在app/assets/javascripts/application.js
//= require jquery
//= require jquery _ujs
//= require turbolinks
//= require_tree .
然后在开启服务器开发之前,在命令行输入 rake assets:precompile
rails 会帮你把 assets 里的文件依照环境设定打包压缩放在 public/assets 目錄底下,所有的文件名称后会加入 md5 的 fingerprinting 用來表示其內容供快取。
注:如果输入该命令行后发现无法加载css或js ,或者是提示说.js 文件已被加载,那么有可能是因为你的文件夹中还有别的application文件,里面的配置发生冲突。
接着开启服务器开发就可以了。。。
在配置开发过程 中,由于存放在app/assets/images中的有些图片是被引用在css中的,而当你在命令行中运行了rake assets:percompile后,你会发现图片的文件名是被加密了,所以在css中无法找到图片,从而导致界面无法显示。
尝试过将图片路径进行修改,让它读取app/assets/images中的iphone.png,但是not working
会发现开启服务器开发后,在控制台那里可以看到读取不到图片的错误提示。而在public/assets中的图片由于文件名被加密,所以很难确定
后来由于自己很懒,就把要用到的图copy到public/assets中,上面贴的代码保持不变,然后就成功了。。。@_@|||
分享到:
相关推荐
asset_hat, 在 Rails 中,快速加载CSS和 JS 你的资产被覆盖 AssetHat快速加载CSS和 JS 。 你的资产被覆盖。当首次请求该包时,使用 Rails'默认的资源缓存,CSS和JS连接( 而不是缩小) 。 不够好为了使你的页面加载更...
critical-path-css-rails, 在 Rails 中,只加载初始viewport所需的CSS ! critical-path-css-rails 仅加载 Rails 中初始viewport所需的CSS !这个 gem 让你只需要在初始页面视图中加载所需的CSS 。 这给你 blazin'...
Asset Pipeline允许开发者更有效地管理和优化应用程序的前端资源,如JavaScript、CSS和图片,通过合并和压缩这些文件来减少HTTP请求,从而提高页面加载速度。CoffeeScript是一种简洁、语法接近JavaScript的编程语言...
仅在Rails中加载初始视口所需CSS! 这种宝石让你只加载您需要的初始页面视图中CSS的能力。 由于没有最初的网络调用来获取您应用程序CSS,因此可以让您快速发展。 此gem假定您将异步加载其余CSS。 目前,建议的...
8. **Asset Pipeline**:Rails的资产管道处理JavaScript、CSS和图像等静态资源,可以进行压缩、合并、版本控制,提升页面加载速度。 9. **ActiveJob**:Rails的后台任务处理框架,可以配合各种队列服务(如Resque、...
Webpacker的核心是Webpack,这是一个流行的前端模块打包器,能够处理JavaScript、CSS、图片等各种静态资源,将它们转换、压缩并优化为生产环境下的单一或多个可加载文件。 **Webpacker的安装与配置** 1. 在Rails...
为了解决安全问题,Rails 4引入了Strong Parameters,强制开发者明确指定哪些参数可以被控制器的action使用。这有助于防止意外的未授权数据注入。 7. ** turbolinks** Rails 4默认包含了Turbolinks,这是一个...
- **Asset Pipeline**:Rails 3.1引入了Asset Pipeline,将CSS、JavaScript、图片等静态资源管理整合到一个统一的流程中,提高了页面加载速度。 - **CoffeeScript**:默认使用CoffeeScript作为JavaScript的预...
2. Rails 3.1: 这个版本引入了Asset Pipeline,它管理应用程序的CSS、JavaScript和其他静态资源,提高了加载速度并支持压缩和合并。另外,它还引入了CoffeeScript和Sass作为默认的JavaScript和CSS预处理器,提升了...
4. Asset Pipeline:管理应用的静态资源,如JavaScript、CSS和图片,支持压缩和合并以提高加载速度。 5. Rails发电机:自动化代码生成,帮助快速构建新模型、控制器、迁移等。 6. RESTful设计:鼓励使用HTTP动词来...
Tailwind CSS for Rails 是实用程序优先CSS框架,其中包含诸如flex,pt-4,text-center和rotate-90之类的类,可以直接在您的标记中进行组合以构建任何设计。 Tailwind CSS for Rails可与资产管道和Webpacker一起使用...
### Ruby on Rails 环境搭建与 Passenger+Nginx 配置详解 #### 一、Ruby on Rails 开发环境搭建 在进行 Ruby on Rails 的开发之前,首先需要完成一系列的基础软件安装工作,包括但不限于 Ruby 语言环境、Rails ...
### Rails 入门教程知识点详解 #### 一、Rails与Ruby简介 - **Rails**:全称为Ruby on Rails,简称RoR或Rails,是一种用于快速开发Web应用的框架,基于Ruby语言,由David Heinemeier Hansson创建。Rails强调代码的...
11. **Asset Pipeline**:Rails的资产管道处理CSS、JavaScript和图像等静态资源,支持预处理和组合,提高加载性能。 12. **Webpacker**:在较新的Rails版本中,Webpacker替代Sprockets,用于集成现代前端开发工具,...
9. **Deployment**: 最后,书中还会介绍如何将开发完成的应用部署到生产环境,包括使用Capistrano进行自动化部署、配置服务器环境以及使用Nginx和Unicorn等服务器软件。 通过阅读《敏捷Web开发与Rails:程序指南 第...
Rails默认使用SQLite数据库,但在生产环境中通常使用MySQL或PostgreSQL。首先,安装所需的数据库驱动,如`gem install mysql2`或`gem install pg`。然后,在`config/database.yml`文件中配置你的数据库连接信息。 ...
然而,随着ES6、React等现代前端技术的普及,Assets Pipeline面临一些挑战,比如不支持ES6语法、性能问题以及无法有效处理复杂的依赖关系。这些促使开发者寻找更强大的替代方案,Webpack应运而生。 Webpack是一个...
9. **Asset Pipeline**:Rails的资产管道允许你管理和优化应用中的CSS、JavaScript和图片资源,通过concatenation和minification提升页面加载速度。 10. **Action Cable**:Rails 5引入的特性,实现了Websocket功能...