Rails资产最佳实践

时间：2012-07-14 12:40:42

标签： ruby-on-rails asset-pipeline sprockets

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

资产管道 - 概述

有关管道的目的，好处和内部工作方式的详细信息，请从本指南开始：http://guides.rubyonrails.org/asset_pipeline.html我只会在此总结与我的目的相关的位。

管道必要的原因是：

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

    2. 管道的其他好处是：

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

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

      • app|lib|vender/assets/ - 用于将由管道处理的文件。
      • app/assets/ - 专门针对您为应用程序创建的文件。
      • lib/assets/ - 专门针对您为跨多个应用程序共享而创建的文件。
      • vendor/assets/ - 专门针对其他人创建的文件，例如jQuery和Twitter Bootstrap（虽然它们经常由宝石提供，而不是直接导入到/ vender中）。
      • public/ - 此处的文件保留原样，可直接从您的网络应用的根路径（＆＃39; /＆＃39;）获取。

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

      应用程序/资产/ 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应用程序的默认设置执行的操作：

      1. 默认情况下，编译器将处理application.js，application.css和所有非JS / CSS文件（主要是图像）。
      2. 这两个应用程序文件包含sprockets指令（以=开头的注释行）。 Sprockets是为Rails资产管道编译提供支持的库。这些指令也称为清单，因为它们列出了要包含的文件。
      3. application.js包含一个清单，其中包含两个jquery文件（存在于jquery-rails gem中，而不是在您的应用程序中），然后通过{{1提取app/assets/javascripts/树中的所有文件}}。通过此清单包含的所有文件将被编译到名为require_tree .的单个文件中，并放在application-[the MD5 hash].js中。
      4. public/assets/包含一个清单，可通过application.css提取app/assets/stylesheets/树中的所有文件。 require_tree .指令告诉编译器在required_self文件本身中包含任何CSS内容，并按指令的顺序包含。因此，在这种情况下，application.css中的CSS将显示在其余部分之上。通过此清单包含的所有文件将被编译到名为application.css的单个文件中，并放在application-[the MD5 hash].css中。
      5. app / assets树中的所有非JS / CSS文件（主要是图像）也会被指纹识别并放在public/assets/中，目录结构完好无损。例如，public/assets/最终将为app/assets/images/categories/computers.png。

        6. 概念化资产内依赖情景

        图片

        图像之间没有依赖关系，它们总是独立存在。

        样式表

        • CSS： CSS文件可以相互导入，只要路径正确就行，但它可能不是最好的技术。
        • Sass： Sass文件可以相互导入，也可以共享变量和mixin，但只有当它们仍然是Sass 时（不是在编译成CSS之后），并且仅通过Sass导入。如果您在public/assets/categories/computers-[the MD5 hash].png中有sprockets指令，则需要＆＃39; a＆＃39;和＆＃39; b＆＃39;，它们将在合并之前在不同的上下文中编译。要共享变量和mixin，您必须导入＆＃39; a＆＃39;来自＆＃39; b＆＃39;反之亦然，使用Sass导入指令。 （参见下面的关键概念1.）
        • LESS： [对此不太了解。]

        的JavaScript

        • JS： JavaScript组件具有相互依赖性（例如：Twitter Bootstrap使用jQuery）。但是，它们都会在运行时在浏览器中解析，因此，只要所有内容最终都被浏览器加载，组织/组合项目中的文件并不重要。
        • CoffeeScript： [对此不太了解。]

        帮助行为 - Rails视图

        TODO

        帮助行为 - Sass

        TODO

        最佳做法 - 关键概念

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

          2. 最佳做法 - 常见资产情景

          TODO

          最佳做法 - 一般有用的默认值摘要

          TODO

          **问题**

0 个答案:

没有答案
相关问题
最新问题