(2015.1.20追記)
gulpfile.jsのパスが間違えていたので、修正しました。

Gulpの導入自体がまだの人は、こちらをどうぞ。

俺だけのGulp(ガルプ)

gulp.spritesmithとgulp-svg-symbols

CSSスプライトには、gulp.spritesmithを使用しました。
SVGスプライトは、gulp-svg-spritesの方が良さそうだったのですが、Windowsでうまくインストールできなかったので、gulp-svg-symbolsにしました。

twolfson/gulp.spritesmith · GitHub

Hiswe/gulp-svg-symbols · GitHub

それぞれインストールしましょう。

CSSスプライト

SVGスプライト

エンジンを入れる

gulp.spritesmithを使うには、画像結合するためのエンジンが必要になります。
以下のどれかをインストールしなくてはいけません。

  • pngsmith
  • phantomjs
  • canvas
  • gm (Graphics Magick / Image Magick)

私は、WindowsとMacで簡単にインストールできたgm (Graphics Magick / Image Magick)を選びました。

WindowsのGraphics Magick

ftp://ftp.graphicsmagick.org/pub/GraphicsMagick/windows/

MacのGraphics Magick

ディレクトリを分ける

スプライト系のプラグインは、画像を統合し、それに対応したCSSを同時に作成します。
普通に実装すると、画像とCSSを1つだけ作ることになります。

しかし、こちらの解説のようにwatchを利用することで、ディレクトリ単位で、各ファイルを作ることができます。

gulp.spritesmithを便利にカスタマイズ – to-R

私の場合、watchではなく、他のタスクと同じように名前を付けたかったので、globbyというプラグインを使いました。

gulp-svg-symbolsの設定

gulp.spritesmithと違って、gulp-svg-symbolsには、ファイルによって出力場所を変えたり、名前を変更する機能がありません。

公式サイトにもある通り、下記のプラグインを入れて それぞれ対応します。

条件を設定して、処理を分岐

名前を変更

出力ルールについて

この辺りは、好みで良いと思いますが、自分ルールで設定してみます。

CSSスプライト

app/sprite_img/にスプライト名になるディレクトリを作成し、スプライトにしたい画像ファイルを入れます。

出力された画像ファイルは、app/img/に入れます。

CSSファイルは、SASSにして、app/css/に入れて、メインのCSSへインポートすることにします。
インポートされたファイルは、そのまま使用することはないので、アンダーバーをつけて、納品用のディレクトリに入らないようにします。

SVGスプライト

app/sprite_svg/にスプライト名になるディレクトリを作成し、スプライトにしたいSVGファイルを入れます。

SVGスプライトは、インラインで読み込むと使える機能が増えるため、appディレクトリの外にある、inc/svg/に入れます。

gulp-file-includeの機能で、使用したいhtmlファイル内のbody直下に読み込みます。

使用するhtml内

このCSSファイルも、SASSにし、app/css/に入れて、メインのCSSへインポートします。
同じように、納品用のディレクトリに入らないようにします。

SVGをインラインでの機能を使用しない場合は、CSSスプライトと同じルールの出力で良いでしょう。

gulpfile.js

俺だけのGulpにも使用したものを含めて、記述するとこんな感じになりました。
細かく変わっていますが、気にしないでください。

gulpfile.js

オレオレGulpになってしましましたが、誰かの参考のなれば幸いです。

そんじゃーねー。