Gruntでsprite画像を生成する

grunt-spritesmithとは？

Gruntでsprite画像を生成するGrunt taskイエーイ！
https://www.npmjs.org/package/grunt-spritesmith
https://github.com/Ensighten/grunt-spritesmith

インストール

$ npm install grunt-spritesmith --save-dev

Gruntfile.jsへの記述

基本的には以下の記述でできます

sprite: {
　main:{
　　// spriteにする画像のpath
　　src: 'img/sprite/main/*.png',

　　// 生成されたsprite画像path
　　destImg: 'dist/main.png',

　　// sprite画像に関するmixinが出力されたファイル
　　destCSS: 'sass/_main.scss',

　　// 画像生成のアルゴリズム binary-treeを使うのがいいっぽい
　　// でも事情があるなら他のを使うといいとのこと
　　algorithm: 'binary-tree',

　　// 画像間のpadding
　　padding: 5,

　　// scssにかきだされる画像のpathがデフォルトだと相対なのでお好みで
　　imgPath: '/img/sprite.png',
　}
}

複数のsprite画像を指定したい場合

sprite: {
　main:{
　　src: 'img/sprite/main/*.png',
　　destImg: 'dist/main.png',
　　destCSS: 'sass/_main.scss',
　　algorithm: 'binary-tree',
　　padding: 5,
　　imgPath: '/dist/sprite-main.png',

　　// scssにかきだされる各種変数名を変える
　　// 複数sprite画像を作る場合に変数名がかぶる可能性があるのでprefixをつける
　　cssVarMap: function(sprite){
　　　sprite.name = 'main-' + sprite.name;
　　},

　　// 下で指定するテンプレートへ変数をセットできる
　　// {{ options.prefixMixin }} こんな感じで取得できる
　　cssOpts: {
　　　prefixMixin: 'main'
　　},

　　// 出力するテンプレートを指定
　　cssTemplate: 'template path'
　}, 
　sub:{
　　src: 'img/sprite/sub/*.png',
　　destImg: 'dist/sub.png',
　　destCSS: 'sass/_sub.scss',
　　algorithm: 'binary-tree',
　　padding: 5,
　　imgPath: '/img/sprite-sub.png',

　　cssVarMap: function(sprite){
　　　sprite.name = 'sub-' + sprite.name;
　　},
　　cssOpts: {
　　　prefixMixin: 'sub'
　　},
　　cssTemplate: 'template path'
　}
}

template側では下記のように指定すると参照できる

@mixin {{options.prefixMixin}}($sprite) {