フロントエンドエンジニアになりたい

デザイナーなのかコーダーなのかディレクターなのかよくわからない人のブログ。趣味で絵を描きました(過去形)

spritesmith-texturepacker使用時にクエリストリングをつける

CSSだとgulp-cachebustにパイプかなと思いますが、jsonなのでそういうものは見当たらず、、。 あまりいい方法ではないですが、ファイルを解析して置き換えするのもコストが高いのでspritesmith-texturepackerのパラメータに細工してつけると楽です。

var _ = require('lodash');
var gulp = require('gulp');
var spritesmith = require('gulp.spritesmith');
var spritesmith_texturepacker = require('spritesmith-texturepacker');

gulp.task('make_sprite', function(cb){
  var queryString = '?somethingQuery';
  var src_dir = './images';
  var dist_dir = './sprite';
  var sprite_name = 'sprite.png';
  gulp.src(src_dir+'/*.png')
    .pipe(spritesmith({
      imgName: 'sprite.png',
      cssName: 'sprite.json',
      algorithm: 'binary-tree',
      cssTemplate: function (params) {
        var _params = _.cloneDeep(params);
        _params.items[0].image += queryString;
        return spritesmith_texturepacker(_params);
      }
    }))
    .pipe(gulp.dest('./dist_dir'));
});