Separate gulp.spritesmith settings for retina and non-retina sprites - sprite

Question

I use gulp and gulp.spritesmith for generating sprites. This is my gulpfile.js. Sprite settings stored in an object.
{
imgName: 'sprite.png',
cssName: 'sprite.css',
padding: 10,
retinaSrcFilter: 'images/*-2x.png',
retinaImgName: 'sprite-2x.png'
}
If there are no retina (*-2x.png) images in images folder, I've got an error
Retina settings detected but 0 retina images were found. We have 3 normal images and expect these numbers to line up. Please double check retinaSrcFilter.
How can I check if retina images are exist and load suitable object (with or without retina settings) in spritesmith?

Answer 1

Seems, this error caused when some of source images don’t have x2 analogue. If you have legacy x1 sprites, you have to add x2 image for all of them.
For new x2 images, you can create separate folder, and use gulp-image-resize to scale them down to x1, then use gulp.spritesmith with retinaSrcFilter:
var $, gulp;
gulp = require('gulp');
$ = require('gulp-load-plugins')();
gulp.task('sprites-retina', function() {
var spriteData;
gulp.src('spritesRetinaFolder/**/*#2x.png').pipe($.imageResize({
width: '50%',
height: '50%'
})).pipe($.rename(function(path) {
path.basename = path.basename.slice(0, -3); //remove #2x label
})).pipe(gulp.dest('spritesRetinaFolder'));
spriteData = gulp.src('spritesRetinaFolder/**/*.png').pipe($.spritesmith({
retinaSrcFilter: 'spritesRetinaFolder/**/*#2x.png',
otherConfigParams...
}));
spriteData.img.pipe(gulp.dest('destImagesFolder'));
spriteData.css.pipe(gulp.dest('destStylesFolder'));
});