読者です 読者をやめる 読者になる 読者になる

grunt-spritesmith を Mac (OS X Mavericks) にインストールする

CSS スプライトを自動で作ってくれて Grunt で自動実行できるツール grunt-spritesmithOS 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