分享 Assets management solved: we released Rails Assets

Rei · 发布于 2013年12月13日 · 最后由 Rei 回复于 2014年04月17日 · 6755 次阅读
1
本帖已被设为精华帖!

http://codetunes.com/2013/we-released-rails-assets/

https://rails-assets.org/

The solution to assets management in Rails

Rails Assets is the frictionless proxy between Bundler and Bower. It automatically converts the packaged components into gems that are easily droppable into your asset pipeline and stay up to date.

「我们都是好朋友吧,所以你的东西就是我的东西,我的东西还是我的东西。」

共收到 36 条回复
2474

用 bower 管理 js……但是看上去却是个 gem……似乎可以试试……

2653

刚刚试用了下,非常棒。

4584

@Rei 能介绍一下这个东东吗?

2973

rails4可以? 貌似可以,原来它就是一个asset的source源,而且每个gem也满足了bower规范?哈哈。。感觉这个可以火。。。

问题是,哪个来跟进那些小版本呢?还是靠社区? bty:网站的搜索太帅了,好快。。

2990

不错,这个应该要火

202

@Saito 支持你的逆袭!

2880

asset gem 只能在 rails 用啊, 而且 engine api 变化的话可能还要改

96

感觉这样搞gem好妖蛾子啊...

2973

确定这个自动生成的没有问题?我怎么感觉随便一个生成的gem都缺少图片之类的呢。 例如我刚建立的 plupload (2.0)版本

96

这种做法依然有很多的JS冗余和全局变量的污染。

我们公司用了 seajs 感谢 @edokeh

gem 'seajs-rails' 

cat config/seajs_config.yml

seajs_path: seajs/seajs/2.0.0/sea.js
family: weiport
output:
  relative:
    - "layouts/app.js"
    - "orders/new.js"
    - "shops/form.js"
    - "shops/show.js"
    - "vcards/form.js"
    - "vcards/show.js"
    - "vconsume_recs/index.js"
    - "friends/index.js"
    - "accounts/new.js"
    - "sessions/new.js"
    - "articles/show.js"
    - "articles/index.js"
    - "articles/list.js"
    - "articles/form.js"
    - "base/feedback.js"
    - "base/bottom_menu.js"
    - "base/slide_menu.js"
    - "base/common_modal.js"
    - "base/select_link_modal.js"
    - "base/select_image_modal.js
    - "acts/rotate.js"
    - "acts/scratch.js"
    - "messages/edit.js"
    - "accounts/my.js"
    - "attachments/index.js"
    - "home/index.js"
    - "cases/index.js"
    ...
  all: []
alias:
  "$": "gallery/jquery/1.10.1/jquery.js"
  "$9": "gallery/jquery/1.9.1/jquery.js"
  "jquery.template": "gallery/jquery.template/1.0.0/jquery.template.js"
  "BrowserDetect": "gallery/BrowserDetect/0.0.1/BrowserDetect.js"
  "jquery.placeholder": "gallery/jquery.placeholder/0.0.1/jquery.placeholder.js"
  "jquery.royalslider": "gallery/jquery.royalslider/9.4.8/jquery.royalslider.min.js"
  "handlebars": "gallery/handlebars/1.0.2/runtime"
  "bottom-menu": "gallery/bottom-menu/0.0.1/bottom_menu.js"
  "swfobject": "gallery/swfobject/2.2.0/swfobject.js"
  "iscroll": "gallery/iscroll/4.1.9/iscroll.js"
  "jquery.rotate": "gallery/rotate/2.2/jQueryRotate.js"
  "jquery_ujs": "gallery/jquery_ujs/1.6.0/jquery_ujs.js"
  "bootstrap-modalmanager": "gallery/bootstrap-modal/2.2.0/bootstrap-modalmanager.js"
  "bootstrap-modal": "gallery/bootstrap-modal/2.2.0/bootstrap-modal.js"
  "bootstrap": "gallery/bootstrap/0.0.1/bootstrap.min.js"
  "bootstrap3": "gallery/bootstrap/3.0.2/bootstrap.min.js"
  "jquery.qeditor": "gallery/jquery.qeditor/1.6.2/jquery.qeditor.js"
  "respond" : "gallery/respond/1.4.0/respond.min.js"
  ...

刚开始用的时候各种痛苦,各种反对意见,各种吐槽。 我硬着头皮撑下来。 现在团队习惯了,用起来爽多了。

310

不知道部署会不会痛苦!之前用requirejs 部署的时候出了各种问题... 后来就放弃了!

243

#12楼 @alvin2ye

刚开始用的时候各种痛苦,各种反对意见,各种吐槽。

说明你用错工具了.

Linner 只需要四行就写完你的好几十行了.

modules:
  wrapper: "cmd"
  ignored: "vendor/**/*"
  definition: "/pokeball.js"

效果是一样的.

243

#13楼 @kaka

不知道部署会不会痛苦!之前用requirejs 部署的时候出了各种问题... 后来就放弃了!

用 Linner 部署不痛苦.

开发阶段与生产阶段的区别只是:

Linner watchLinner build 的区别.

96

#14楼 @Saito

误会其实大多痛苦是因为已经用了很多库不是用 cmd 方式的,还有JS文件中相互依赖导致。不是痛苦在配置文件上。

147

我写了个gem来管理自己常用的前端库,具体文件使用vendorer更新 https://github.com/h2ocube/h2ocube_rails_assets

5508

昨天刚看到这个,楼主动作好快 :)

586

#15楼 @Saito 拜读 Linner 中,Github 今天好像抽风了我去

96

实际试用下来的结论是现在这玩意一点用都没有……方便倒不见得方便,比如大量不支持bower的没法用,即使bower支持,但是gem没人生成过的也不能用,要一个个试……然后去官网添加gem……添加成功了还不一定能用……我添加了3个包,只有angular-i18n和greensock能用……

对于少部分支持的,因为只引入了 main property里指定的文件,各种实际需要的img,font,swf,plugin,themes 反而全部丢失,这种情况反而是不写main property的能手动指定路径引用……最终弄下来只删掉了vendor目录中的其中一个文件夹

243

#22楼 @aptx4869

多么痛的领悟!...

这就是为什么要有 Linner 这样的工具的原因.

96

#23楼 @Saito 不不不,用linner看起来会让我整个test suite都不能用……这个更痛……集成了好处一大堆,但是基本都是我工作流中已经实现的或者不怎么需要的,唯独缺少测试框架的支持……

243

#24楼 @aptx4869 javascript 的测试用 mocha 可以在浏览器上测试. 你的 testsuite 使用什么写的?

selenium? 还是 jasmin ? mocha?

96

@Saito 看了下 Linner 的视频, 感觉很 cool, 打算在下个项目中试试。

96

#25楼 @Saito 都试过了,最后只有teaspoon稍微配置一下后算是能用,其他一个能打的都没有……对rails和angularjs的支持最全,包括.coffee.erb文件以及开发测试时动态template的自动载入,guard监视对应文件,写coffee不需要打开浏览器等等

96

实际上,用assets pipeline 打包不能自动同步使用第三方库的唯一问题是在一个文件中异步载入另一个文件时,比如css中载入图片、字体,js异步载入其他js的时候, 需要修正引用的url ——各种手动打包成xx-rails的gem里面经常会出现各种xx.css.erb或者干脆用scss重写——这个修正url的过程理论上大概可以自动化,然而第三方库的作者不会考虑asset pipeline,写的格式不太统一,于是很难完美自动化地修正这些url,然后这里上面提到的所有工具没有一个现在能真正解决这个问题

243

#28楼 @aptx4869 最后这个问题也是 Linner 解决过的问题, CSS 中载入其他资源可以用 Linner 的 copy 命令指定他 copy 后的相对位置. 这个问题本身是不存在的.

而 js 异步载入其他 js 的问题, 实际上 Linner 默认使用了 CMD 规范, 所有文件都可以 require 获得, 这个地址在 linner watch 的时候已经确定了, 所以也没问题.

teaspoon 本身也没什么特别的, 可以集成 mocha, 而且有两种模式, 一种是浏览器内, 一种是 phantomjs 后台运行, 浏览器端的没什么特别的, 这个大家都可以做. 服务端的话可以后台集成, 这个我已经有一个 issue 在了. 后面会做.

96

#29楼 @Saito 额,我说的是 用assets pipeline引入第三方库 的问题,你这都已经完全不用assets pipeline了当然没这问题……

但是我这有依赖assets pipeline,首先需要能用.coffee.erb,因为有关键的配置是由后端生成的,比如routes和assets hosts, websockets url,api key啥的,不可能手动抄一遍吧,然后我试过的测试框架只有teaspoon和jasminerice能识别.coffee.erb

然后是template的自动载入,开发测试每个directive或者route controller的时候,都需要动态地将特定的slim文件(这些文件有时候也包含后端生成的代码,比如用form builder 写的form)编译成html给$templateCache载入,这是核心需求,不可能像ui-bootstrap等第三方库的测试那样傻乎乎的在js里面重复手写html,他们可以这样做是因为作为库的template比较小,也不太会变的,而面向用户的app需求经常变,template更大,修改频繁,在js里重复手写html简直是噩梦……我试过的有且只有teaspoon能用原生方法实现

153

@Rei 讨教个问题,在引用jquery.xx 或者 font-awesome 这类的assets gem 的时候,往app.js 和app.css 引用该怎么写呢? 貌似.和-会在编译的时候出错。

1

#31楼 @ytwman 正常情况这两个符号不会引起错误,贴你的代码和错误看看。

153

#32楼 @Rei 是引用路径的问题,看不懂e文真伤脑筋啊。多谢了哈。

250

#33楼 @ytwmanhttps://rails-assets.org/components 这里先找到你要的component,然后点击相应的版本号,然后就会显示出怎么在application.js/.css去引用

3435

require 各种error, 不好用。好多包看起来支持,能在 https://rails-assets.org/components 搜到,其实用不了,大半因为bower.json 没main entry。

也就是个beta version,决定暂时不用了。

1

#35楼 @hardywu 我已经放弃治疗,用 vendor 了。js 本身没个统一约定,无解。

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册