gulp.spritesmithを便利にカスタマイズ

「gulp.spritesmith」はCSSスプライトを生成するためのgulpプラグインです。

spritesmithの利用方法は『CSSスプライトを生成する「grunt-spritesmith」』を参照していいただくとしてgulpで行なったカスタマイズを紹介します。

gulpの使い方は「タスクランナーgulp入門」を参照してください。

gulp.spritesmithでちょっと面倒くさいなと感じていたのは1タスクで書き出されるスプライト画像のスプライト用のCSSが１つだということ。たとえば下記のように指定をすると「sprite」というディレクトリにスプライト用の画像を突っ込んでおくとsprite.pngとsprite.scsssというファイルが出力されます。

var spriteData = gulp.src('sprite/*.png')
    .pipe(plumber())
    .pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.scss'
    }));
spriteData.img.pipe(gulp.dest("image"));
spriteData.css.pipe(gulp.dest("scss"));

これをspirete/aaaというディレクトリにある画像群はaaa.pingとaaa.scssと書き出し、spirete/bbbというディレクトリにある画像群はbbb.pingとbbb.scssと書き出すように変更しました。

つまり、Compassみたいにタスクを追加しなくてもディレクトリ毎にスプライト画像が生成されるようにしています。

これは、以下のようにgulpfile.jsに記述して利用しています。

var gulp = require('gulp');
var spritesmith = require("gulp.spritesmith");
 
//config
var root = "htdocs",
config = {
   "path" : {
      "htdocs"    : root,
      "sass"      : root+"/sass",
      "sprite"    : root+"/sprite",
      "image"     : root+"/image"
   }
}
 
//watch task
gulp.task('watch', function() {
    //Sprite
    gulp.watch(config.path.sprite+'/**/*.png', function(arg){
        var filePath = arg.path.match(/^(.+\/)(.+?)(\/.+?\..+?)$/);
        var spriteData = gulp.src(filePath[1]+filePath[2]+'/*.png')
            .pipe(plumber())
            .pipe(spritesmith({
                imgName: filePath[2]+'.png',
                cssName: filePath[2]+'.scss'
            }));
        spriteData.img.pipe(gulp.dest(config.path.image));
        spriteData.css.pipe(gulp.dest(config.path.sass));
    });
});

変更があったspriteディレクトリ内の画像のパスを取得し、ディレクトリ名を取得してそれを元にCSSスプライトの出力を行うというものです。

細かいカスタムが可能なのがgulpの良いところですね。

関連エントリー

gulpでJavaScriptの結合圧縮処理
Sassなどのエラー時にgulpタスクを終了させない為の「gulp-plumber」
gulpとnode.jsの連携
Gruntで始めるWeb制作の自動化
CSS3のベンダープリフィックスを後付けする「grunt-autoprefixer」

スポンサードリンク

«スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」 | メイン | Re:フリーランスの心得（初期編）「フリーランスは決してカッコいい働き方ではないし、自由でもない」»