backbone-boilerplateを触ってみる

backbone-boilerplate
https://github.com/tbranyen/backbone-boilerplate


クライアントサイドMVCフレームワークであるbackbone.jsを使用したアプリケーションのテンプレートですね
なんかbackbone.jsってこういうの多いですね。

使ってみる

上記URLからzipかtarをダウンロードするか、git cloneします

cd myproject
git clone https://github.com/tbranyen/backbone-boilerplate.git .
rm -rf .git

付属のビルドツールを利用するためにはnode.jsが必要です

node.js
http://nodejs.org/


とりあえず、「すぐ動かせる」のが重要です

node build/server

これでちゃんと動きます


特徴

html5-boilerplateがベースになっている

html5-boilerplateはHTML5でサイトを構築するためのテンプレートです
https://github.com/h5bp/html5-boilerplate

こちらによくまとまっていました
http://tokkono.cute.coocan.jp/blog/slow/index.php/web-technology/5-fundamentals-when-using-h5bp/

ディレクトリ構成

あらかじめソースコードやテンプレートを配置するディレクトリが切られています
このディレクトリ構成に従って静的ファイルを配置することで、後述のbuildツールが役立ちます

.
├── app            # backboneのコード
│   ├── index.js
│   ├── modules
│   └── templates   
├── assets         # その他の静的ファイル
│   ├── css
│   ├── img
│   └── js
├── dist           # ビルド済み静的ファイル
├── build
├── favicon.ico
├── index.html
└── test
ビルドツール
  • node build/server

開発用のhttpサーバーを起動します

  • node build/server release

静的ファイルとしてdist/release以下のファイルを使用します

  • node build

backboneのコードやassets以下のファイルをminimizeしてdist/release以下に配置します

  • node build watch

ファイルの更新が合った場合に即時にbuildしてくれる。dist/debug以下に配置します

  • node build watch:min

node build watchと同じですが、 dist/debug と dist/releaseに配置します


このwatch系はemacsと相性がわるいのか、ファイルをさわった瞬間に以下のエラーになりました

Error: ENOENT, no such file or directory '/Users/yuhei/myproject/app/modules/.#example.js'