gulp-spritesmith.js

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var spritesmith = require('gulp.spritesmith');

gulp.task('generate-sprites', function () {
  var spriteData = gulp.src('path-das-suas-imagens/*.png')
  .pipe(spritesmith({
    retinaSrcFilter: ['filtro-para-as-imagens-de-retina/*-2x.png'],
    imgName: 'nome-do-sprite-que-vai-ser-gerado.png',
    retinaImgName: 'nome-do-sprite-retina-que-vai-ser-gerado.png',
    imgPath: 'url-da-imagem-que-vai-ser-colocado-no-css', // dica: da pra colocar um if ternário com a url de dev e outra de prod
    retinaImgPath : 'url-da-imagem-de-retina-que-vai-ser-colocado-no-css', // dica: da pra colocar um if ternário com a url de dev e outra de prod
    cssName: 'nome-do-arquivo-css-que-vai-sergerado.css',
    algorithm : 'left-right', // algoritmo que vai montar os sprites, pode ser um destes: top-down left-right  diagonal  alt-diagonal  binary-tree
    padding: 2, // espaçamento entre as imagens
    cssTemplate: 'tpl-sprite.handlebars' // template pra gerar o css
  }));

  // antes de salvar as imagens no disco, aproveita o stream e já minifica a imagem
  spriteData.img.pipe(imagemin({
    progressive: true,
    svgoPlugins: [{removeViewBox: false}],
    use: [pngquant()]
  }))
  .pipe(gulp.dest('diretorio-onde-sera-salva-a-imagem/'));

  // Pipe CSS stream through CSS optimizer and onto disk
  spriteData.css.pipe(gulp.dest('diretorio-onde-sera-salvo-o-css/'));


});

tpl-sprite.handlebars

.sprite-geral{background-image: url({{spritesheet.image}});}

{{#sprites}}
  .sprite-geral.{{name}}{
    background-position: {{px.offset_x}} {{px.offset_y}};
    width: {{px.width}};
    height: {{px.height}};
  }
{{/sprites}}

@media (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2), screen and (min-resolution: 300dpi){

  .sprite-geral{
    background-image: url({{retina_spritesheet.image}});
    background-size: {{spritesheet.px.width}} {{spritesheet.px.height}};
  }

  {{#retina_groups}}
    .sprite-geral.{{normal.name}}{
      background-position: {{normal.px.offset_x}} {{normal.px.offset_y}};
    }
  {{/retina_groups}}

}