Simple sprite generator with retina support (gulp + gulp.spritesmith)

gulpfile.js

var gulp = require('gulp');
var csso = require('gulp-csso');
var spritesmith = require('gulp.spritesmith');

gulp.task('sprite', function () {
  var spriteData = gulp.src('images/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css',
    padding: 10,
    cssOpts: {
      cssSelector: function(sprite) {
          // some-hover.png => .icon-some:hover {}
          if (sprite.name.indexOf('-hover') !== -1) {
              return '.icon-' + sprite.name.replace('-hover', ':hover');
          }
          // active--some.png => .active .icon-some {}
          if (sprite.name.indexOf('active--') !== -1) {
              return '.active .icon-' + sprite.name.replace('active--', '');
          } else {
              // default icon
              return '.icon-' + sprite.name;
          }

      }

    }

    // use retina settings if necessary
    // retinaSrcFilter: 'images/*-2x.png',
    // retinaImgName: 'sprite-2x.png'
  }));

  spriteData.img
    .pipe(gulp.dest('./build/images/'));

  spriteData.css
    .pipe(csso())
    .pipe(gulp.dest('./build/css/'));
});

gulp.task('default', ['sprite']);