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/'));


});