grunt-spritesmith を Windows にインストールする

CSS スプライトを自動で作ってくれて Grunt で自動実行できるツール grunt-spritesmith を Windows 7 (64 bit) 環境にインストールした。（参考：Mac へのインストール）
Grunt に関しては Grunt を使って LESS のコンパイル環境を作る を参照されたい。

PhantomJS のインストール

grunt-spritesmith は、スプライト画像を作るエンジンとして phantomjs と gm (Graphics Magick / Image Magick) を選べる。PC-UNIX では node-canvas も選べるそうだが残念ながら Windows では動作しない。
PhantomJS は WebKit 互換の動作で、JavaScript を使って Web ページを制御したりスクリーンショットを撮ったりできるツールらしく、面白そうなのでこちらを選んだ。

• PhantomJS

ダウンロードページから phantomjs-1.9.2-windows.zip をダウンロード。ZIP ファイルを展開すると中に phantomjs.exe というファイルがあるので、これをパスの通ったディレクトリに移動する。
サンプルがいくつか付いてくるのでそれを使って動作を確認する。

> phantomjs weather.js

PhantomJS が終了しない不具合を解決する

一部環境で PhantomJS が実行されるものの終了しない不具合がある。Ctrl+C でも終了できず、タスクマネージャを使うこととなる。

調べてみると原因は NVIDIA のグラフィックカードの設定にあるようで、設定を変えると正常に動作するようになった。

• windows - phantomjs exit() doesn't terminate the process - Stack Overflow

スタートメニューなどから「NVIDIA コントロールパネル」を開き、3D 設定の管理 → 優先するグラフィックス プロセッサの項目で「高パフォーマンス NVIDIA プロセッサ」を選ぶ。「適用」ボタンで設定を反映させるとこの不具合が何事もなかったかのように解決する。

grunt-spritesmith のインストール

いつも通り npm でインストールするだけ。

> npm install grunt-spritesmith --save-dev

途中で canvas のビルドに失敗するが気にしなくてよい。

動作確認

次のような Gruntfile.js を書いて動作を確認する。

module.exports = function(grunt) {

	grunt.loadNpmTasks('grunt-spritesmith');

	grunt.initConfig({
		sprite: {
			all: {
				src: "個々の画像が入ったディレクトリ/*.png",
				destImg: "出力ディレクトリ/sprite.png",
				destCSS: "出力ディレクトリ/sprite.css"
			}
		}
	});

	grunt.registerTask("default", ["sprite"]);
};

grunt コマンドを実行すると sprite.png と sprite.css が出力されるはずだ。