gulp.spritesmithとpostcss

postcss用のspritesmithテンプレートを作成する。

css.template.handlerbars

{{#sprites}}
@define-placeholder {{name}} {
  background-position: {{px.offset_x}} {{px.offset_y}};
  size: {{px.width}} {{px.height}};
}
{{/sprites}}

gulpタスク

gulp.task('sprite', () => {
  const spriteData = gulp.src('/src/img/sprite/*.png')
    .pipe(spritesmith({
      imgName: 'sprite.png',
      cssName: '_sprite.css',
      algorithm: 'binary-tree',
      cssTemplate: '/src/css.template.handlerbars'
    }));

  const imgStream = spriteData.img
    .pipe(buffer())
    .pipe(imagemin())
    .pipe(gulp.dest('/dist/img/sprite/'));

  const cssStream = spriteData.css
    .pipe(gulp.dest('/src/css/'));

  return merge(imgStream, cssStream);
});

postcssファイル

_sprite.css

@define-placeholder icon-40-book {
  background-position: -44px 0px;
  size: 44px 44px;
}