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

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

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

１、Brunchインストール


npm install -g brunch

まずはbrunchをインストール

　


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

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

今回は「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内のファイルをいじっていく形。非常にわかりやすく、シンプルな構成。

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