2013年12月13日金曜日

Brunch を使ってみる

今ちまちまと作っているブログアプリケーションである MoreCat ですけれども、フロントエンドの開発に Brunch というフレームワークを使おうと考えています。名前は前から聞いていたのですが実際に触るのは初めてなので、メモがてら練習してみます。
なお、おれの JavaScript 力(ジャバスクリプトちから)は皆無に等しいので、JS もこれからがんばります。
利用環境は Fedora 19 です。

Brunch ってなんじゃい

Brunch is an ultra-fast HTML5 build tool
だそうです。CoffeScript や Backbone.js、Stylus など、いろいろなフレームワークを組み合わせたフレームワーク + ビルド環境って感じでしょうか。

Brunch の導入

とりあえずトップページの Getting Started に沿ってやってみます。

Node.js/npm のインストール


brunch のインストールに必要です。
$ sudo yum install npm
$ npm -v              
1.3.6

Bower のインストール


あとで必要になるので Bower もインストールしておきます。
$ sudo npm install -g bower 
$ bower -v
1.2.8

Brunch のインストール

$ sudo npm install -g brunch

スケルトンからプロジェクトを作成

$ brunch new gh:paulmillr/brunch-with-chaplin brunch-practice

スケルトンはいろいろあるようですが、とりあえず一番メジャーそうなものを選びました。brunch new <skeleton-URL> [optional-output-dir] の書式で作成します。[optional-output-dir] を指定しない場合は、カレントディレクトリに資材が展開されます。資材は以下のような内容です。
$ cd brunch-practice
$ tree -L 1 --dirsfirst
.
├── app
├── bower_components
├── generators
├── node_modules
├── public
├── README.md
├── bower.json
├── brunch-config.coffee
└── package.json

スケルトンをそのまま動かしてみて、ちょっといじる

何も変更せずにそのまま動かしてみました。
$ cd brunch-practice
$ brunch watch --server
12 Dec 23:30:19 - info: application started on http://localhost:3333/
12 Dec 23:30:20 - info: compiled 29 files and 1 cached into 3 files, copied index.html in 769ms
localhost:3333 でリスンしてるよ、と表示されるのでブラウザで確認してみます。
このページは app/assets/index.html のようなので、適当に body 要素に hogehoge と書いてみました。すると変更を検知して自動的にビルドしてくれます。
12 Dec 23:33:35 - info: copied index.html in 68ms
再度 localhost:3333 にアクセスすると、変更が反映されていることがわかります。しかもブラウザも勝手に更新されてました。すごい。こうやって開発を進めていくわけですね。

プロダクション環境のビルド

以下のコマンドで、プロダクション環境のビルドが行われ、public ディレクトリに出力されます。デフォルトで js は全てミニファイされています。
brunch build --production

Brunch, 使ってみよう

自分が JavaScript の周辺フレームワークに疎いため、ひとつひとつを理解するのに時間がかかりそうですが、開発そのものはすごくスムーズに行えそうです。がんばるぞ。

0 件のコメント:

コメントを投稿