このライブラリちょっと試したいとかあの挙動確かめたいとか、そういう簡単な作業環境が楽に準備できるようなものをSprocketsとBowerを利用して作ってみた。

https://github.com/ykhs/workbench

下の手順でサーバーが起動して http://localhost:9292/ でサイトが見られるようになる。

$ git clone https://github.com/ykhs/workbench.git
$ cd workbench
$ rake setup
$ rake server

ライブラリを追加したいと思ったら bower install して assets/js/lib.coffee にSprocketsの require ディレクティブを追記する。

$ bower install momentjs
$ echo "#=require momentjs/moment.js" >> assets/js/lib.coffee

assets/js/lib.coffee には記述サンプルも兼ねて、jQuery, Underscore, Backboneの3点を最初から読むようにしてある。

#assets/js/lib.coffee

#=require jquery/jquery
#=require underscore/underscore
#=require backbone/backbone

もちろん、bower.jsondependencies の方にもこれらは依存ライブラリとして記述してある。
素の bower installrake setup のタスク内で bundle install と一緒に実行されるようにしていて、配置については、同梱した .bowerrc に従って assets/vendor 配下に置かれる。

こんな感じの配置になる。自分のスクリプトは assets/js/main.coffee に書いていくという具合。

assets/
├── css
│   ├── lib.scss
│   └── main.scss
├── js
│   ├── lib.coffee
│   └── main.coffee
└── vendor
    ├── backbone
    ├── jquery
    └── underscore

同じ要領でCSS用にも assets/css/lib.scssassets/css/main.scss を用意している。

また、 http://localhost:9292/test でmochaによるテストも実行できる。
テストコードは assets/js/tests/*.coffee へ適当に書いておけば、 assets/js/test.coffee に記述しておいた require_tree ディレクティブが拾ってくれる。
単純に自分が慣れているという理由でmocha, expect, sinonを選択して bower.json に入れておいた。

テンプレートエンジンは、特にこだわりなくslimを使ってる。

bowerいいなーとは感じていたものの、 bower install jquery とかやっていい感じにパッケージを所得したのに <script src...> ってHTMLにいちいち書かなくちゃいけないのがなんとなく腑に落ちなくて、まあ仕方ないんだけど。Sprockets使えばそういう気持ちにならないだろうと思って試してみて、割といい感じはしている。

参考