2015/09/10

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

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

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

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

1、Brunchインストール


npm install -g brunch

まずはbrunchをインストール  

2、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

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

3、開発

プロジェクトの生成が完了したら、指定したディレクトリに移動し(今回は「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したのちに上記手順をふむと、

b1aa7aab85dc5addb8364602a3437938.png

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

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

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

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