スプライト画像の生成のベストプラクティスについて

事の経緯（読み飛ばしてOK）

1. 昔作ったReactをFiber対応するついでに、Build環境の刷新を思い立つ
2. 現状は
   • JS:Gulp+Browserify
   • CSS:gulp-sass
   • スプライト画像：gulp-spritesmith
   • ローカル環境：gulp-server
3. browserify -> webpack3
4. gulp-sass -> node-sass
5. gulp-server -> webpack-dev-server

と、ここまできて思った

「webpackもnode-sassもCIから直接叩けるから、Gulp要らなくね？依存ファイルは少ないほうがいいし」

しかしここで問題が一つだけある

「sprite-smithどうしようかな・・・」

代替案

SpriteSmith

spritesmith本体、これだけでも設定ファイル書けば使えるんだけど、かなりめんどくさい
spritesmith

gulp-spriteSmith or grunt-spriteSmith

使いやすいのはわかるんだけど、もはやgulpもgruntもspriteSmith以外には使う予定がないので、可能な限り避けたい
gulp-spritesmith
grunt-spritesmith

webpack-spritesmith

gulp/gruntの代替としては有力候補だが、依存ファイルがやたらと多い上に設定にクセがあって辛い、なんか書き方がコロコロ変わる印象
webpack-spritesmith

spritesmith-ci

なぜか知名度の低いspritesmithのCI版、使い方も簡単でJSの設定ファイルを置いて、コマンド叩くだけ
spritesmith-ci

というわけで spritesmith-ci おすすめ

実は使うのが簡単で、やるのは「.spritesmith.js」という設定ファイルを作って

spritesmith.js

module.exports = {
  src: 'sprites/*.png', // スプライト画像になる元画像
  destImage: 'images/sprite.png', // 生成される画像
  destCSS: 'sass/_sprite.scss' // 生成されるスプライト用CSS
};

こんな感じで設定を書く、あとは

./node_modules/bin/spritesmith

とかコマンド打てばOK！

明らかに他の手段よりも簡単な上に依存ファイルも少ないし、何かのビルドシステムに依存していないので、後に違うツールで代替したり、削除したりするのも楽なのでオススメ。