gulp.spritesmithのメモ #JavaScript

npm i -D gulp.spritesmith

cssはscss形式でmixinフォルダへ、
imgはpublic以下のimgフォルダへ

gulpfile.babel.js

import spritesmith from 'gulp.spritesmith';

gulp.task('sprite', () => {
    const spriteData = gulp.src(`${SRC}/img/sprite/**/*.png`)
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: '_sprite.scss',
            imgPath: '../img/sprite/sprite.png',
            cssFormat: 'scss',
            cssVarMap: (sprite) => {
                sprite.name = 'sprite-' + sprite.name;
            }
        }));
    spriteData.img.pipe(gulp.dest(`${DEST}/img/sprite`));
    spriteData.css.pipe(gulp.dest(`${SRC}/scss/mixin`));
})

スケールできるように_sprite.scssの一部のmixinを以下に差し替える

_sprite.scss

@mixin sprite-width($sprite, $scale) {
  width: ceil( nth($sprite, 5) * $scale ) + 1;
}

@mixin sprite-height($sprite, $scale) {
  height: ceil( nth($sprite, 6) * $scale ) + 1;
}

@mixin sprite-position($sprite, $scale) {
  $sprite-offset-x: nth($sprite, 3) * $scale + 1;
  $sprite-offset-y: nth($sprite, 4) * $scale + 1;
  background-position: $sprite-offset-x $sprite-offset-y;  
}

@mixin sprite-image($sprite, $scale) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
  background-size: (nth($sprite, 7) * $scale) (nth($sprite, 8) * $scale);
}

@mixin sprite($sprite, $scale:1) {
  @include sprite-image($sprite, $scale);
  @include sprite-position($sprite, $scale);
  @include sprite-width($sprite, $scale);
  @include sprite-height($sprite, $scale);
  @include hide-txt();
}

_hide-txt.scss

@mixin hide-txt() {
    text-indent: -9999px;
    white-space: nowrap;
    overflow: hidden;
}

参考
gulp.spritesmithでCSS spriteをやってみた。【gulp】
Compassのsprite-mapによるスプライト画像生成を、spritesmithに移行する