15

我是 Rails 新手，无法找出组织资产的最佳方式。这个问题的目的是收集我的想法，征求意见，并随着时间的推移改进文档——也许有一天它可以成为 Rails 指南。（Rails Wiki 似乎已经死了。）这将是对新手概念化的帮助，而不是参考，因此它将仅限于最常见的场景。

资产管道 - 概述

有关管道的目的、好处和内部工作原理的详细信息，请从本指南开始：http: //guides.rubyonrails.org/asset_pipeline.html 我将在这里仅总结与我的目的相关的部分。

需要管道的原因是：

  1. 编译：将高级语言（ERb、Haml、Sass、LESS、CoffeeScript...）编译成纯 CSS/JS。

管道的额外好处是：

  1. 串联：将多个文件合并为一个以提高客户端性能。
  2. 缩小：删除空格和其他巧妙的优化以减小文件大小。
  3. 指纹识别：在文件名中添加了文件内容的 MD5 哈希，以强制缓存在文件更改时再次获取文件。

资产管道 - 默认文件系统布局

  • app|lib|vender/assets/- 用于将由管道处理的文件。
  • app/assets/- 专门用于您为应用程序创建的文件。
  • lib/assets/- 专门用于您为在多个应用程序之间共享而创建的文件。
  • vendor/assets/- 专门用于其他人创建的文件，例如 jQuery 和 Twitter Bootstrap（尽管它们经常由 gems 提供，而不是直接导入 /vender）。
  • public/- 此处的文件保持原样，可直接从 Web 应用程序的根路径 ('/') 获取。

资产管道 - 默认文件和行为

应用程序/资产/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require_tree .

应用程序/资产/样式表/application.css

/*
 *= require_self
 *= require_tree .
 */

public/404.html
public/robots.txt
...

宝石文件

...
gem 'jquery-rails'
...

以下是资产管道编译器使用新 Rails 应用程序的默认设置所做的事情：

  1. 默认情况下，编译器将处理application.js、application.css和所有非 JS/CSS 文件（主要是图像）。
  2. 这两个应用程序文件包含 sprockets 指令（以 = 开头的注释行）。Sprockets 是为 Rails 资产管道编译提供支持的库。这些指令也称为manifests，因为它们列出了要包含的文件。
  3. application.js包含拉入两个 jquery 文件（存在于 jquery-rails gem 中，而不是在您的应用程序中）的清单，然后app/assets/javascripts/通过require_tree .. 通过此清单包含的所有文件都将编译为一个名为 的文件application-[the MD5 hash].js，并放置在public/assets/.
  4. application.css包含一个清单，该清单app/assets/stylesheets/通过require_tree .. 该required_self指令告诉编译器在application.css文件本身中包含任何 CSS 内容，并且按照指令的顺序。因此，在这种情况下，其中的 CSSapplication.css将出现在其余部分之上。通过此清单包含的所有文件都将编译为一个名为 的文件application-[the MD5 hash].css，并放置在public/assets/.
  5. 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需要“a”和“b”的 sprockets 指令，它们将在合并之前在单独的上下文中编译。要共享变量和 mixin，您必须使用 Sass 导入指令从 'b' 导入 'a'，反之亦然。（请参阅下面的关键概念 1。）
  • LESS： [对此了解不够。]

JavaScript

  • JS： JavaScript 组件具有相互依赖关系（例如：Twitter Bootstrap 使用 jQuery）。但是，它们都在运行时在浏览器中得到解析，因此无论您如何组织/组合项目中的文件，只要所有内容最终都由浏览器加载即可。
  • CoffeeScript： [对此了解不够。]

辅助行为 - Rails 视图

去做

辅助行为 - Sass

去做

最佳实践 - 关键概念

  1. 该管道用于为生产准备资产。将其视为部署系统的一部分，而不是应用程序本身。自己建立应用程序的逻辑结构，然后配置 sprocket 以在该结构上正确运行。

最佳实践 - 通用资产场景

去做

最佳实践 - 一般有用的默认值摘要

去做

** 问题 **

4

0 回答 0