Rails资产最佳实践
我是Rails的新手,无法找出组织资产的最佳方法。 这个问题的目的是收集我的想法,征求意见,并随着时间的推移进化文档 – 也许有一天它可能是一个Rails指南。 (Rails Wiki似乎已经死了。)这将作为新手概念化的辅助,而不是参考,因此它将仅限于最常见的场景。
资产管道 – 概述
有关管道的目的,好处和内部工作方式的详细信息,请从本指南开始: http : //guides.rubyonrails.org/asset_pipeline.html我将仅在此总结与我的目的相关的位。
管道必要的原因是:
- 编译:将高级语言(ERb,Haml,Sass,LESS,CoffeeScript …)编译成纯CSS / JS。
该管道的额外好处是:
- 连接:将多个文件合并为一个以提高客户端性能。
- 缩小:删除空格和其他巧妙的优化以减小文件大小。
- 指纹识别:在文件名中添加了文件内容的MD5哈希值,以强制缓存在更改时再次获取文件。
资产管道 – 默认文件系统布局
-
app|lib|vender/assets/
– 用于将由管道处理的文件。 -
app/assets/
– 专门针对您为应用程序创建的文件。 -
lib/assets/
– 专门用于为跨多个应用程序共享而创建的文件。 -
vendor/assets/
– 专门用于其他人创建的文件,例如jQuery和Twitter Bootstrap(虽然它们经常由gem提供,而不是直接导入/ vender)。 -
public/
– 此处的文件保留原样,可直接从您的Web应用程序的根路径(’/’)获取。
资产管道 – 默认文件和行为
应用程序/资产/ JavaScript的/ application.js中
//= require jquery //= require jquery_ujs //= require_tree .
应用程序/资产/样式表/ application.css
/* *= require_self *= require_tree . */
公共/ 404.html
公共/的robots.txt
…
的Gemfile
... gem 'jquery-rails' ...
以下是资产管道编译器使用新Rails应用程序的默认设置执行的操作:
- 默认情况下,编译器将处理
application.js
,application.css
和所有非JS / CSS文件(主要是图像)。 - 这两个应用程序文件包含sprockets指令(以=开头的注释行)。 Sprockets是为Rails资产管道编译提供支持的库。 这些指令也称为清单 ,因为它们列出了要包含的文件。
-
application.js
包含一个清单,它包含两个jquery文件(存在于jquery-rails gem中,而不是在你的应用程序中),然后通过require_tree .
提取app/assets/javascripts/
tree中的所有文件require_tree .
。 通过此清单包含的所有文件将被编译到名为application-[the MD5 hash].js
的单个文件中,并放在public/assets/
。 -
application.css
包含一个清单,它通过require_tree .
提取app/assets/stylesheets/
tree中的所有文件require_tree .
。required_self
指令告诉编译器在application.css
文件本身中包含任何CSS内容,并按指令的顺序。 因此,在这种情况下,application.css
的CSS将显示在其余部分之上。 通过此清单包含的所有文件将被编译到名为application-[the MD5 hash].css
的单个文件中,并放置在public/assets/
。 - app / assets树中的所有非JS / CSS文件(大多数图像)也将被指纹识别并放置在
public/assets/
,目录结构完好无损。 例如,app/assets/images/categories/computers.png
最终将作为public/assets/categories/computers-[the MD5 hash].png
。
概念化资产内依赖性方案
图片
图像之间没有依赖关系,它们总是独立存在。
样式表
- CSS: CSS文件可以相互导入,只要路径正确就可以工作,尽管它可能不是最好的技术。
- Sass: Sass文件可以互相导入,也可以共享变量和mixin,但只有当它们仍然是Sass时 (不是在编译成CSS之后),并且只能通过Sass导入 。 如果你在
application.css.scss
中有sprockets指令需要’a’和’b’,它们将在合并之前在不同的上下文中编译。 要共享变量和mixin,必须使用Sass导入指令从’b’导入’a’,反之亦然。 (参见下面的关键概念1) - 较少: [对此不太了解。]
JavaScript的
- JS: JavaScript组件具有相互依赖性(例如:Twitter Bootstrap使用jQuery)。 但是,它们都会在运行时在浏览器中得到解析,因此无论您如何组织/组合项目中的文件,只要所有内容最终都被浏览器加载。
- CoffeeScript: [对此不太了解。]
帮助行为 – Rails视图
去做
助手行为 – 萨斯
去做
最佳实践 – 关键概念
- 该管道用于准备生产资产。 将其视为部署系统的一部分,而不是应用程序本身。 自己建立应用程序的逻辑结构,然后配置链轮以在该结构上正确运行。
最佳实践 – 通用资产方案
去做
最佳实践 – 一般有用的默认值摘要
去做
**问题**