刚起床，一会到公司就去试试。希望可以解决 vendor/assets 引入 几十个外部 js 和 css 文件，造成无法升级第 3 方 js 库的问题。下面是简单翻了一下原文

Assets management solved: we released Rails Assets

过去的几周我们一直在整 Rails Assets 终于可以在这周给 Ruby 社区提供一个管理 assets 的解决方案了。

展示

Tymon 在 London Ruby Users Group meeting on Monday 展示了 Rails Assets

Watch the video from the talk 或者看看我下面的简单翻译

目前面临的问题

• Rails 项目中管理 assets 很难
• 大量的 JavaScript libraries 不兼容
• 遗留项目不可维护

目前的解决方案

• vendor/assets
• bower
• component
• browserify(npm)
• asses gems

Rails Assets 用法示例

上午没空翻，看 #7 楼

优点

• 不用 vendor/assets
• 适当的版本
• 解决依赖问题
• 无需额外的编译
• 在部分真实产品中已经使用也没发现啥大问题

工作原理

上午没空翻，看 #7 楼

挑战

上午没空翻

故事

自从 Rails 3.1 引入 asset pipeline 之后，在 Rails 项目中管理 client-side libraries 总算脱离石器时代进入青铜时代了。再也不用手动把那些需要用到的 JavaScript/CSS frameworks 上传到 /public 文件夹了。

但是当你真正做项目的时候才发现，其中的苦楚真是：如人饮水，冷暖自知。我们仍然要管理每个项目中得 vendor/assets 文件夹，已期自己版本库中的这些第 3 方代码和它们原始库保持同步。RubyGems 上的版本通常会有几周才会更新，当然也有坑爹的数月不更新。它没有像 Ruby-China 这样的社区支持。主要是这货是纯手动的，以致于想保持 gems 和外面的最新版本一致特别繁琐。

另一面，前端开发者们完全忽略 Rubyists。他们捣鼓出来了一个叫 Bower 的玩意来管理软件包。并且解决了让我们深恶痛绝的问题，那帮熊孩子们可不关心 Gemfile。

在 Rails 应用中合理的管理 asset 好像缺了一个环节。明显的一个场景：每次手动更新特定项目中较旧的 client-side libraries 文件。然后在其它的项目中定期重复这个动作。总有一天你会掀桌子：玩儿蛋去吧，就让这些文件保持初始状态，我用它就是想实现 XXX 效果，实现效果之后我再也不想动这些文件。 technicaldebt

考虑到本帅近期是泡着温泉做着 SPAs 编代码，上述情景成了一个大问题。因为每天开发结束的时候，总要有专人手动来管理我们程序中使用的 core libraries 和 toolkits。这感觉就像回到 1999 年的时候，完全不符合我们高富帅的身份。

Rails Assets 的出现正是为了解决这个问题。在 Bower 和 Bundler 之间提供一个代理，完美调和 front-end 和 back-end 的矛盾。

感谢我们的 CTO，感谢我们的 UI 设计师，感谢天，感谢地，感谢 CCTV。

我们用了许多我们开发的，仍在运行的项目来验证了这个方案的可行性。当然我们也不能吹牛 X 说这个方案帮我们提高了工作效率，改进了工作流程，省了多少时间和客户的银子。呵呵呵，你懂得。

Technical highlights

呦呦切克闹，这个功能将成为杀手级的说。

What happens next

作者需要你的帮助和支持，有啥问题请给作者提供反馈。

bower 所存在的问题

1. 首先，bower 的覆盖面不够大。( 市面上还有大量的 javascript libraries 是不支持的。

2. 其次，没多少人写 main property. ( main 的自动引入由 sprockets 提供

3. 再次，ignore property 更没多少人写。

这里举两个最简单的例子：

• Modernizr 不支持 bower
• Moment 不支持 langs 的引入

而且，当没有 main property 支持的时候，用完之后会发现，整个 public 目录杂乱无章。各种 图片，README.md 都进来了。解决方案是：你只能 Fork 一份自己的来发到 bower 上，这是最痛苦的一点。

人民大救星

为什么不让 Javascript 跟 CSS 的引入回归本源呢？

让我为大家推荐下面这个工具：Linner

Linner 是一个功能完整的 Assets 打包工具，其功能集是 Sprockets 的超集。

• 支持 Sass, Coffee 作为基础语言。
• 支持 连接，拷贝，预编译，CSS Sprite 作为基础功能集。
• 支持 Javascript Common Module Definition 规范，指定代码会被 CMD 所包装。
• 支持 LiveReload.
• 支持 OS X Lion and Mountaion Lion 的原生通知
• 支持 压缩代码
• 等等。

最重要的，支持 Linner install 来安装 Linner 所需的各种 library bundles.

Linner 使用 config.yml 或者 Linnerfile 文件作为自己的配置文件，一份生产环境中使用的 Linnerfile 是这样的：

paths:
  app: "src"
  public: "public"
groups:
  scripts:
    paths:
      - "src/scripts"
    concat:
      "/pokeball.js": "{src,vendor}/**/*.{js,coffee}"
    order:
      - vendor/jquery.js
      - vendor/handlebars.js
      - vendor/lodash.js
      - vendor/moment.js
      - vendor/moment/zh-ch.js
      - vendor/pikaday.js
      - vendor/jquery/jquery.ui.widget.js
      - vendor/jquery/jquery.iframe-transport.js
      - vendor/jquery/jquery.fileupload.js
  styles:
    paths:
      - "src/styles"
    concat:
      "/pokeball.css": "{src,vendor}/**/[a-z]*.{css,scss}"
    order:
      - vendor/normalize.css
      - ...
      - src/styles/pokeball.scss
  templates:
    paths:
      - "src/scripts"
    precompile:
      "../vendor/templates.js": "{src,vendor}/**/*.hbs"
modules:
  wrapper: "cmd"
  ignored: "vendor/**/*"
  definition: "/pokeball.js"
notification: true
bundles:
  jquery.js:
    version: 1.10.2
    url: http://code.jquery.com/jquery-1.10.2.js
  jquery/jquery.ui.widget.js:
    version: 1.10.3
    url: https://raw.github.com/blueimp/jQuery-File-Upload/9.3.0/js/vendor/jquery.ui.widget.js
  jquery/jquery.iframe-transport.js:
    version: 1.8.1
    url: https://raw.github.com/blueimp/jQuery-File-Upload/9.3.0/js/jquery.iframe-transport.js
  jquery/jquery.fileupload.js:
    version: 9.3.0
    url: https://raw.github.com/blueimp/jQuery-File-Upload/9.3.0/js/jquery.fileupload.js
  jquery/jquery.pagination.js:
    version: 2.2.1
    url: https://raw.github.com/gbirke/jquery_pagination/3a614db5fa1e02a5f568b2ac798224efb963a843/src/jquery.pagination.js
  jquery/jquery.serialize-object.js:
    version: 2.0.3
    url: https://raw.github.com/hongymagic/jQuery.serializeObject/v2.0.3/jquery.serializeObject.js
  jquery/jquery.validator.js:
    version: 1.2.0
    url: https://raw.github.com/TerminusHQ/validator.js/1.2.0/validator.js
  lodash.js:
    version: 2.2.1
    url: https://raw.github.com/lodash/lodash/2.2.1/dist/lodash.underscore.js
  spin.js:
    version: 1.3.2
    url: https://raw.github.com/fgnass/spin.js/1.3.2/spin.js
  moment.js:
    version: 2.4.0
    url: https://raw.github.com/moment/moment/2.4.0/moment.js
  moment/zh-ch.js:
    version: 2.4.0
    url: https://raw.github.com/moment/moment/2.4.0/lang/zh-cn.js
  handlebars.js:
    version: 1.0.0
    url: https://raw.github.com/wycats/handlebars.js/1.0.0/dist/handlebars.runtime.js
  pikaday.js:
    version: 1.1.0
    url: https://raw.github.com/dbushell/Pikaday/1.1.0/pikaday.js
  normalize.css:
    version: 1.1.3
    url: https://raw.github.com/necolas/normalize.css/v1.1.3/normalize.css

而我们今天着重着墨的就是 bundles 这部分。结合 scripts 下面的 order 配置部分，我们就轻松解决了 Sprockets 关于引入顺序的问题...

让我们先来解决 Bower 所不能解决的那两个问题。

• 引入 Modernizr

modernizr.js:
    version: 2.7.1
    url: https://raw.github.com/h5bp/html5-boilerplate/v4.3.0/js/vendor/modernizr-2.7.1.min.js

modernizr 就会被安装在 vendor 目录中，呈现出：

vendor
└ modernizr.js

而 modernizr.js 同时会被缓存在 ~/.linner/bundles 内部。

• 引入 moment.js 的同时引入 moment.zh-cn.js 作为 i18n 文件。

moment.js:
  version: 2.4.0
  url: https://raw.github.com/moment/moment/2.4.0/moment.js
moment/zh-ch.js:
  version: 2.4.0
  url: https://raw.github.com/moment/moment/2.4.0/lang/zh-cn.js

moment 就会被安装在 vendor 目录中，呈现出：

vendor
└ moment.js
└ moment
   └ zh-ch.js

Linner bundles 给你最大的限度来操控自己的 vendor 目录，全面使用 Linner bundles 之后你的 vendor 目录完全可以被加入 .gitignore. 同时你可以获得最大限度的目录操控，适合有洁癖的你。