https://ruby-china.org/krazy en-us <h3 id="需要了解的依赖">需要了解的依赖</h3> <ul> <li>tilt </li> </ul> <p>为各种 ruby 模版提供统一接口，模版也包括 coffeescript, sass 这些预处理器。 tilt 提供一个 Template 的基类。扩展新的 tilt 模版只需要继承这个类，实现<code>prepare</code>和<code>evaluate</code>方法就可以直接通过文件<code>path</code>创建 template 实例然后调用<code>render</code>方法得到结果。</p> <p>这些 template 在<code>sprockets</code>里面又统一叫做<code>engine</code></p> <ul> <li>hike</li> </ul> <p>一个文件查找器，可以根据文件名遍历某个路径下的文件，查找到文件然后返回文件的绝对路径。 <code>append_path</code>方法指定查找路径，<code>append_extension</code>指定查找文件的扩展名。 <code>environment</code>对象也有这两个方法，就是委托给它的<code>@trail</code>实例变量去做的。</p> <h3 id="路径(path)和文件属性(attributes)">路径 (path) 和文件属性 (attributes)</h3> <p><code>sprockets</code>有几个路径的术语需要注意。</p> <ul> <li><p><code>load_path</code>: 用来搜索 assets 的目标路径。比如安装<code>bootstrap-rails</code>就可以把它的路径加到<code>load_path</code>, 这样就可以通过 gem 来提供静态文件。</p></li> <li><p><code>logical_path</code>: 静态文件<code>asset</code>总是通过<code>logical_path</code>引用，可以理解成文件名。 是 asset 文件相对于静态文件根目录下的路径。 类似与<code>application.js</code>或者<code>models/project.js</code>这样的形式。</p></li> <li><p><code>path</code>是指的文件绝对路径。代表在文件系统中的真实路径。</p></li> </ul> <p>上面提到的<code>hike</code>这个库在<code>load_path</code>中查找，并通过<code>logical_path</code>找到<code>path</code>。 <code>hike</code>内部有提供对这个查找实现的一个简单缓存。</p> <h3 id="关键的类">关键的类</h3> <p><code>Asset</code>代表静态文件，它有三个子类</p> <p>1. <code>StaticAsset</code>不需要处理，大多是图片，但是需要生成摘要 2. <code>ProcessedAsset</code>: 需要经过处理器处理 3. <code>BundledAsset</code>: 通过注释里面的 directive 来创建 asset bundles</p> <p>与<code>Asset</code>相关的还有一个<code>AssetArributes</code>类，所有属性都通过这个类来进行管理，可以得到每个文件的扩展名，格式，需要使用的处理器。</p> <p><code>Environment</code>和<code>Index</code>类继承<code>Base</code>类。</p> <p><code>Base</code>类里面 include 了<code>Caching</code>, <code>Paths</code>, <code>Mime</code>, <code>Processing</code>, <code>Compressing</code>, <code>Engines</code>, <code>Server</code>几个 module, 基本是一个 module 一个文件。</p> <p><code>Index</code>是一个 cached 版本的<code>Environment</code>, 自己本身不暴露，而是通过<code>Environment</code>的<code>index</code>方法被实例化去调用</p> <p><code>Environment</code>可以获取 assets 以及某个 path 对应的文件的 attributes, servering assets, 操作路径，注册处理器，指定 context.. 可以说是负责了所有的事情，无所不知...</p> <p><code>Context</code></p> <p>是处理器真正执行的地方，通过 asset 的 attributes 拿到所有处理器，然后迭代对文件内容进行处理并最终返回。</p> <p><code>Engine</code></p> <p>就是各种处理器了 engine 包括 template 和 processor 每一个 engine 和一个 filename extension 绑定</p> <p>engine 通过 extensions 扩展名指定 extensions 可以层叠，然后根据扩展名会从右到左求值 (.css.scss.erb...) engine 都必须遵循 Tilt::Template 接口，然后注册</p> <p><code>sprockets</code>对<code>engine</code>提供一个通过<code>Sprockets</code>全局变量或者 Environment 实例的注册 1. <code>Environment.register_engine ".ext", FooProcessor</code> 2. <code>Sprockets.register_engine ".sass", SassTemplate</code></p> <h3 id="作为rack app(入口)">作为 rack app(入口)</h3> <p>sprockets 提供一个静态文件处理的 pipeline 编译环境。同时它也是一个基于 rack 的 rack app.</p> <p>作为 rack app, 可以直接把它挂载在某个 url 下直接访问. 静态文件 asset 就可以直接通过它的<code>logical_path</code>访问到</p> <p>这里逻辑的入口就是 server.rb 那个文件，作为一个 rack app，必然有一个<code>call</code>方法。 在这里调用<code>find_asset</code>(在 base.rb 中定义) 找到对应的 asset。</p> <p><code>find_asset</code>中调用<code>build_asset</code>对 asset 进行编译返回对应的 asset。</p> <p><code>build_asset</code>根据对应文件是否有处理器来决定<code>asset</code>的类型是 processed 还是 static，asset 实例化的时候，会委托<code>context</code>对象进行编译，这个过程都在 context.rb 的<code>evaluate</code>方法中。</p> <h3 id="更多...(再写就更臭更长了的内容)">更多...(再写就更臭更长了的内容)</h3> <ol> <li> <code>require</code> directive 如何工作..</li> <li> <code>cache</code>机制怎样起作用..(cache_store)</li> <li>如何支持<code>bower</code>的</li> </ol> krazy Thu, 16 Jan 2014 22:54:17 +0800 https://ruby-china.org/topics/16841 https://ruby-china.org/topics/16841 <p>搬运.. <a href="http://www.yinwang.org/blog-cn/2013/04/20/editor-ide/" rel="nofollow" target="_blank">http://www.yinwang.org/blog-cn/2013/04/20/editor-ide/</a></p> <p>还记得很久之前 <a href="/luikore" class="user-mention" title="@luikore"><i>@</i>luikore</a> 写过一篇吐槽编辑器的文很好看...</p> krazy Sun, 21 Apr 2013 14:43:53 +0800 https://ruby-china.org/topics/10381 https://ruby-china.org/topics/10381