Create sprite sheets with gulp.spritesmith and GraphicsMagick to create spritesheets for both retina and non-retina devices

gulpfile.js

var spritesmith = require('gulp.spritesmith'),
    gm = require('gm');

gulp.task('sprite', function () {
    console.log('Creating sprite(s)...');
    var spriteData = gulp.src('./path/to/your/image/sprites/*.png')
        .pipe(spritesmith({
            // Filter out `-2x` (retina) images to separate spritesheet
            //   e.g. `github-2x.png`, `twitter-2x.png`
            retinaSrcFilter: './path/to/your/image/sprites/*@2x.png',
            /* this whole image path is used in css background declarations */
            imgName: 'sprite.png',
            retinaImgName: 'sprite-2x.png',
            cssName: '_sprite.scss'
        })
        .on('error', function(e) {
          console.log(e.message);
        }));
    spriteData.img.pipe(gulp.dest('./path/to/your/images'));
    spriteData.css.pipe(gulp.dest('./path/for/your/sprite/scss/'));
});