grunt-spritesmith を Mac (OS X Mavericks) にインストールする
CSS スプライトを自動で作ってくれて Grunt で自動実行できるツール grunt-spritesmith を OS X Mavericks 環境にインストールした。（参考：Windows へのインストール）
Grunt に関しては Grunt を使って LESS のコンパイル環境を作る を参照されたい。
Graphics Magick のインストール
grunt-spritesmith で画像を生成するエンジンとして PhantomJS, Graphics Magick, node-canvas の 3 種類が選べるが、Graphics Magick が一番簡単だった。
Homebrew を使ってインストール。バージョンは 1.3.18 だった。
% brew update && brew install graphicsmagick
grunt-spritesmith のインストール
いつも通り npm でインストールする。
% npm install grunt-spritesmith --save-dev
途中で canvas のビルドに失敗するが、 Graphics Magick だけでも動作することを確認した。
PhantomJS のインストール
Graphics Magick だけでも動いたが、PhantomJS もインストールした。phantomjs-1.9.2-macosx.zip をダウンロード、展開して /usr/local/bin に配置した。
ただ、起動するたびに次の警告が出る。
phantomjs[32571:507] *** WARNING: Method userSpaceScaleFactor in class NSView is deprecated on 10.7 and later. It should not be used in new applications. Use convertRectToBacking: instead.
プロジェクトの issue list にも載っている。
node-canvas のインストール
さらに node-canvas もインストールしてみた。画像の数が多くなるとこれが一番速いらしい。
Homebrew で Cairo をインストールしたのち、node-canvas を npm でインストールしてみる。
% brew install cairo % sudo npm install -g canvas
そうすると pkg-config にパッケージ cairo が無いと怒られる。Homebrew の診断ツールを実行してみると次の警告が。
% brew doctor Warning: You have unlinked kegs in your Cellar ...
しかるべき位置にライブラリが配置する処理 “link” を実行する必要があった。
% brew link cairo
再び npm install を叩くと次は xcb-shm が無いと怒られる。
原因は xcb-shm の情報が pkg-config から見えないところにあるから。で、パスを通す。
% export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig
sudo を使ったときに環境変数が受け継がれなくて困るので、visudo で次の設定を追加する。
Defaults env_keep += "PKG_CONFIG_PATH"
これでめでたく準備が整ったので改めて node-canvas をインストールする。
% sudo npm install -g canvas
さてプロジェクトに戻るが、 node-canvas がいちいちビルドされるようなので、毎回環境変数を設定する必要があるかもしれない。そのときは ~/.profile などに書いておこう。
% export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/X11/lib/pkgconfig % npm install grunt-spritesmith --save-dev
