2015/09/10

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で好きなプロジェクトをインストールする。 skelton一覧 - http://brunch.io/skeletons.html なぜかやたらとCoffeeScriptが多い。。 今回は「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したのちに上記手順をふむと、 brunchで生成されたhtmlが表示された! 何やらよくわからない画像が表示されているが、アプリケーションを作成していくための雛形が作られている様子。 非常に簡単! アプリケーション内は といった構成。 app内のファイルをいじっていく形。非常にわかりやすく、シンプルな構成。 インストールからアプリケーションの起動までやってみたが、簡単に導入できる点は素敵。 実際に開発を始めてみて、問題など出していってみたいと思う。 今回のソース https://github.com/yhikishima/Brunch-env/tree/master/01_Pineapple