[Mac][WebApp] HomebrewからのYeoman環境構築

前回の更新からかなり間が空いてしまいましたが、最近WebAppに興味を持ち始めていて、備忘録の意味も込めて環境構築について書いてみようと思います。

WebAppを開発するにあたっては、ライブラリ・フレームワークの導入や雛形の作成など面倒なことが多々あるのですが、それらを自動化してくれるYeomanというツールがあると知りました。(公式サイトによると、ツールではなくワークフローなんだそうです)

このYeomanを導入するためにはrubyやnodeなどいくつかのソフトウェアが必要で、自分のMacBook Airには導入されていなかったりバージョンが古かったりしたので、最初にHomebrewを用いて必要なソフトウェアの導入から始めました。

その際の手順やはまりポイントなどを以下に書いていこうと思います。
ちなみにOSのバージョンはMountain Lion(10.8.2)です。

Homebrewの導入

HomebrewとはUbuntuにおけるaptみたいなもので、様々なオープンソースソフトウェアのインストール/アンインストールを管理してくれます。

Macでは同様のツールとしてMacPortsというものがあり、自分の環境にも入っていたのですが、最近はHomebrewが流行ってきているらしいので乗り換えてみました。

MacPortsのアンインストール

こちらのページを参考にさせていただきました。

$ sudo port -f uninstall installed
$ sudo rm -rf \
  /opt/local \
  /Applications/DarwinPorts \
  /Applications/MacPorts \
  /Library/LaunchDaemons/org.macports.* \
  /Library/Receipts/DarwinPorts*.pkg \
  /Library/Receipts/MacPorts*.pkg \
  /Library/StartupItems/DarwinPortsStartup \
  /Library/Tcl/darwinports1.0 \
  /Library/Tcl/macports1.0 \
  ~/.macports

Homebrewのインストール

公式ページには最初にいくつかの手順がありましたが、僕の環境ではいきなり下記のコマンドでいけました。

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Homebrewでは/usr/local/binの下に実行ファイルがインストールされるので、.bashrcに下記を追加してPATHを通します。

export PATH=/usr/local/bin:$PATH

Yeomanの導入

Yeomanを導入する準備として、Nodeのパッケージ管理システムであるnpm、CSSフレームワークのCompassが必要となります。

Ruby, Nodeのインストール

先ほど導入したHomebrewを用いてインストールします。

rubyは元々入っていましたが、Homebrewで最新のバージョンにしました。

$ brew install ruby
$ brew install node

Compassのインストール

こちらのページを参考にさせていただきました。
Rubyのパッケージ管理システムであるRubyGemsを利用します。

$ sudo gem update --system
$ sudo gem install sass
$ sudo gem install compass

Yeoman環境構築

こちらのページを参考にさせていただきました。

npmを用いて3つのパッケージをインストールします。

$ sudo npm install -g yo grunt-cli bower

Yeomanにはテンプレートがいくつもあるのですが、今回はAngularJSのテンプレを導入しました。

$ sudo npm install -g generator-angular

そして適当なディレクトリを作成し、プロジェクトの雛形を作成します。

$ mkdir <dir>
$ cd <dir>
$ yo angular

いくつか質問されますが、とりあえずどう答えても構いません。

実行してみる

さて、環境が整ったので、試しにアプリを起動してみます。

$ grunt server

しかし、下記のようなWarningが出て失敗してしまいました。

Warning: You need to have Ruby and Compass installed and in your system PATH for this task to work. More info: https://github.com/gruntjs/grunt-contrib-compass Use --force to continue.

調べてみたら、どうやらcompassにパスが通っていないということがわかりました。

gemでインストールされるコマンドのパスは下記のようにして調べられました。

$ gem env

この結果の"EXECUTABLE DIRECTORY"にcompassが存在していたので、パスを通して再び grunt server を実行してみると、無事に起動しました。

YeomanはLiveReloadやファイルの圧縮など、便利な機能がたくさんありそうなので、これから色々と試してみようと思います。