html5アプリ作成のためのフレームワーク brunch

javascript html5 coffeescript

brunchというhtml5アプリを作るためのフレームワークがあります。
http://brunch.io/

以下の言語、ライブラリ、ツールを使用してます。


CoffeeScript http://jashkenas.github.com/coffee-script/
Backbone.js http://documentcloud.github.com/backbone/
Underscore.js http://documentcloud.github.com/underscore/
Stitch https://github.com/sstephenson/stitch
Eco https://github.com/sstephenson/eco
Stylus http://learnboost.github.com/stylus/
jQuery http://jquery.com/


インストール

npmからインストールします

 npm install brunch -g

プロジェクトの初め方

project_nameディレクトリが作成され、プロジェクトの関連ファイルが生成されます

 brunch new {project_name}

生成されるファイルは以下の通り

├── build
│   └── web
│       ├── css
│       │   └── main.css
│       └── js
│           └── app.js
├── config.yaml
├── index.html
└── src
    ├── app
    │   ├── collections
    │   ├── main.coffee
    │   ├── models
    │   ├── routers
    │   │   └── main_router.coffee
    │   ├── styles
    │   │   ├── main.styl
    │   │   └── reset.styl
    │   ├── templates
    │   │   └── home.eco
    │   └── views
    │       └── home_view.coffee
    └── vendor
        ├── ConsoleDummy.js
        ├── backbone-0.5.3.js
        ├── jquery-1.6.2.js
        └── underscore-1.1.7.js

作業するのは基本的にsrc/appディレクトリ以下のファイルになります。
src/vendor以下にはサードパーティのライブラリを置きます。

.coffee、.styl、ecoファイルをコンパイルする

 cd {project_name}
 brunch watch .

watchコマンドが動いている間は、ファイルを修正するたびにコンパイルします

サンプル

Todoリストのサンプルがgithubにあります
https://github.com/brunch/example-todos


backbone.jsを使い初めて、なにをどうしていいかわからない場合(自分がそうですが)、brunchのようなフレームワークを使うと、modelやviewやrouterのファイルの分け方など、ある程度枠組みが決められているので、とっかかりやすいんじゃないかと思います