Mac で Twitter / bootstrap をもっと使いこなす準備とか。

仕事が忙しいと言い訳して、久しくブログ書いてなくてちょーダメっぷりを発揮しています。
皆様いかがお過ごしですか。

今日は http://twitter.github.com/ title=Twitter / Bootstrap をもっと使いこなすためにhttps://github.com/twitter/bootstrap/blob/master/README.mdのDevelopersまわりのメモなど残してみようと思います。

通常、bootstrapを普通に使うだけなら、ダウンロードしてそのまま使えばいいだけですが、開発やってる人はlessやtestが使えるほうがいいよねってゆうか、使えよ、的な。
今までのさぼりっぷりは棚に上げて、さっそくもろもろ準備してみましょう。
といっても、やることは書いてあるので、インストールしてみてハマったところなどを残すだけなんですけれども。

ちなみに Mac OS X 10.7.4 Lion でやってます。bootstrapは現時点での最新2.0.4を使いました。
やり終わった後に思い出しながら書いてるのでちょっと前後したりするかもしれませんがご愛嬌ってことで。

// nodeまわり

// node.js をforeverとかで使ってない、まだnode.jsで遊んでない人は homebrew があるといいです。
// node.jsをインストール

$ brew install node
// node.js のバージョンチェック

$ node --version
// npm のインストール

$ curl http://npmjs.org/install.sh | sh
// npm のバージョンチェック

$ npm --v
// README.md にあるとおり、必要なものを入れる

$ npm install recess uglify-js jshint -g
// なんか connect モジュールがないとかってエラーになることがある？

// 後でどうにでもなるので、メジャーなフレームワークつっこめば一緒に入る。

$ npm install express -g
// これで、bootstrap の make が出来るようになるので、bootstrapのホームディレクトリでmakeする

$ cd /path/twitter/bootstrap

$ make
// 何をやってるかは Makefile 読むといいと思われ。
// testまわり

// 個人的には後でJasmineで書き換えちゃったりしようかとか思っているけど、

// とりあえず動かすのが大事なので、phantom.jsをインストール。
$ brew install phantomjs
// テストは下記で

$ make test 
// もしかしたら connect がないってエラー出るのこっちだったかもｗ
// watch まわり。

// less フォルダ中の .less ファイルの変更監視をして、自動的にmakeしてくれる。TDDってか。

// watchr （スペル注意）を使うので、gem でインストール。
$ gem install watchr
// マックだとこれがいるって書いてあったので一緒にインストール（よくわかってない）
$ gem install ruby-fsevent
// 環境によるのかわからないけど、一度ターミナルからログアウトしないと変更が反映されなかった。

// うちのマックはRuby環境をrbenvで管理してるせいかも？
$ make watch
// これで less フォルダの書き換えをすると自動的に反映されてcssが書き出しされる。

// はずだったんだけど、うまくいかないみたい。

最後の watch については、Mac OS X には watch コマンドがないので、 homebrew でインストールするとか、dmgを拾ってきてインストールとかいくつか手段があるようなのだけど、自分の開発環境で試してみたところ、パスと権限の問題に引っかかって、結局うまくいかなかったので却下にした。
たぶん/var/wwwとかにおいて、パーミッションをフルオープンにするとかしないとうまくいかない気がする。
ぶっちゃけ、権限を甘くするくらいなら自動化を諦めて、make 叩いたほうがマシだと思うのでいいかなって。
そんなに頻繁にlessなんか処理しないしね。的なｗ