yaakaito.org

BrunchでJavaScriptアプリはじめる手順

Brunch, CoffeeScript, JavaScript

こんにちは!うきょーです! 最近Brunchというものを知ったので、とりあえずはじめてみたときのメモです。 正確にはChaplinを先に知って、結構良さげだし試してみよーとか思ったところが始まりなので、brunch-with-chaplinを前提にしてます。(今回はchaplinの話はしません。)

brunchってそもそも何

gruntとか使っている人は、gruntにgiter8をくっつけて++というイメージが分かりやすいかと思います。Yeomanとかその系列のものです。 レイヤーが違うので比較してもあんまり意味はないんですが、grunt使っていた頃からすると、

  • 最初からCoffeeScriptのことを考えているので、CoffeeScript使う場合は嬉しい (最近はそうでもないみたいだけど)
  • プロジェクトのひな形作りやすいのは嬉しい
  • ビルトインサーバーがあるので、watch --server みたいなの出来て嬉しい
  • Mocha+phantomjsを最初から生成してくれるので、テストドリブンで始めるが楽
  • ブラウザのオートリロードとかもあるよ!

という感じで、gruntみたいに自分でタスク組んで〜とやるよりは、サクッと開発を始められる感じです。 そこまで使ってないし、まだよくわからんので説明はこのくらいで。

CommonJSっぽいモジュールシステムとかはまあ一長一短だと思うのであんまり。

はじめる

brunchをインストールします。(node 0.6.10 ~)

1
$ npm install -g brunch

プロジェクトのひな形を作る

Githubからテンプレートを引っ張ってきて作ります。今回はchaplinが使いたかったので、brunch-with-chaplinを引っ張ってきます。

1
$ brunch new <app-name> --skeleton https://github.com/paulmillr/brunch-with-chaplin

簡単ですね。treeしてみるとこんな感じになってます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$ tree -L 2 -F --dirsfirst
.
├── app/
│   ├── assets/
│   ├── controllers/
│   ├── lib/
│   ├── models/
│   ├── views/
│   ├── application.coffee
│   ├── initialize.coffee
│   ├── mediator.coffee
│   └── routes.coffee
├── generators/
│   ├── collection/
│   ├── collection-test/
│   ├── collection-view/
│   ├── controller/
│   ├── controller-test/
│   ├── generator/
│   ├── model/
│   ├── model-test/
│   ├── style/
│   ├── template/
│   ├── view/
│   └── view-test/
├── node_modules/
│   ├── chai/
│   ├── clean-css-brunch/
│   ├── coffee-script-brunch/
│   ├── css-brunch/
│   ├── handlebars-brunch/
│   ├── javascript-brunch/
│   ├── sinon/
│   ├── sinon-chai/
│   ├── stylus-brunch/
│   └── uglify-js-brunch/
├── test/
│   ├── assets/
│   ├── vendor/
│   ├── views/
│   └── test-helpers.coffee
├── vendor/
│   ├── scripts/
│   └── styles/
├── README.md
├── config.coffee
└── package.json

config.coffeeにいろいろ設定が書いてあるんですが、長いので別で書きます。

とりあえずビルドしてみます。

1
$ brunch build

/publicができて、ここにもろもろ生成されたファイルが入っています。デプロイのときはここを使えばよいっぽい。

ビルトインサーバーを使ってアプリを起動してみる。

1
2
$ brunch watch --server
$ open http://localhost:3333/

こういう感じにアプリが起動していることがわかります、やりましたね!

テストを走らせる

サーバー起動してる状態で、/publicの中に出来たテストランナーをブラウザで開けば普通にテストが走ります。 phantomjs使いたいときは、

1
$ brunch test

でよいらしいです。(使ってない)

他の環境でのセットアップ

brunchベースのプロジェクトにコミットするときは、 見た感じ、npm installすればよさそうなので試してみる

1
2
$ npm install
$ brunch w --server

出来た、これでよさげ。

使ってみてあーだこうだはもうちょっとしてから書こうと思います。