Brunchでフロントエンド開発 - その２

http://qiita.com/yhikishima/items/5c595fab7df4aa885a7e
昨日の記事からの流れで、brunchのインストールから起動までを行ってみたいと思う。

http://brunch.io/ のステップの内容、そのままインストールしていってみた。

１、Brunchインストール

npm install -g brunch

まずはbrunchをインストール

　

２、Brunchプロジェクトを作成

brunch new <skeleton-URL> [optional-output-dir]

skeleton listで好きなプロジェクトをインストールする。

• skelton一覧 - http://brunch.io/skeletons.html
  • なぜかやたらとCoffeeScriptが多い。。

今回は「Pineapple in a Can」を入れてみる。
任意のディレクトリに移動し、

brunch new gh:timebox-designs/pineapple-in-a-can 01_Pineapple

以上のコマンドをうつ。何やら色々なファイルが入ってきた。
　

３、開発

プロジェクトの生成が完了したら、指定したディレクトリに移動し（今回は「01_Pineapple」）、以下のコマンドをうつ

brunch watch --server

おお！動いた。

info: application started on http://localhost:8080/

ターミナルに表示されたコメントには、「http://localhost:8080/」 ここを表示しろと。
ブラウザで確認してみると。・
　
　　
　　　
　　　　
　　
何も表示されていなかった。。。。
　　　　
　　　　

error: { [Error: Component must have "/Users/yhiki1/work/Brunch-env/01_Pineapple/bower_components/marionette/bower.json"] code: 'NO_BOWER_JSON' }

とエラーがでていたので、bower installする必要があったそうだ。
あらためてbower installしたのちに上記手順をふむと、

　
brunchで生成されたhtmlが表示された！
何やらよくわからない画像が表示されているが、アプリケーションを作成していくための雛形が作られている様子。
非常に簡単！
　
アプリケーション内は

　
といった構成。
app内のファイルをいじっていく形。非常にわかりやすく、シンプルな構成。

インストールからアプリケーションの起動までやってみたが、簡単に導入できる点は素敵。
実際に開発を始めてみて、問題など出していってみたいと思う。

　
今回のソース
https://github.com/yhikishima/Brunch-env/tree/master/01_Pineapple