Inconsistent Size Issue

[mm-purenet]

I am experiencing the following issue with version 6.0.0:

I keep getting the following error when attempting to run the sprite task from my gulpfile:

Error: Normal sprite has inconsistent size with retina sprite. "\images\sprites\checkbox.png" is 15x15 while "\images\sprites-retina\search@2x.png" is 228x80.

It appears to be comparing 2 different files.

My gulp config for spritesmith is as follows:

gulp.task('sprite', function generateSpritesheets() {
var spriteData = gulp.src('./images/**/*.png')
.pipe(spritesmith({

    retinaSrcFilter: './images/sprites-retina/*@2x.png',

    imgPath: '../spritesheets/spritesheet.png',
    imgName: 'spritesheet.png',

    retinaImgPath: '../spritesheets/spritesheet-2x.png',
    retinaImgName: 'spritesheet-2x.png',

    cssName: '_sprites.scss',

    padding: 20
}));

spriteData.img.pipe(gulp.dest('spritesheets'));

spriteData.css.pipe(gulp.dest('sass/utils'));
});

This config works without any issues in version 5.0.1.

[twolfson]

Can you paste the names of all files resolved by ./images/**/*.png?

gulp.src('./images/**/*.png').on('data', function logPath (file) { console.log(file.path); });

[mm-purenet]

images\sprites\icon-fav.png images\sprites\form-checkbox.png images\sprites\btn-basket-add.png images\sprites\form-radio.png images\sprites\btn-search.png images\sprites\icon-bin.png images\sprites\icon-basket.png images\sprites\icon-tick.png images\sprites\form-checkbox-active.png images\sprites\form-radio-active.png images\sprites-retina\icon-fav@2x.png images\sprites-retina\form-radio@2x.png images\sprites-retina\icon-tick@2x.png images\sprites-retina\icon-bin@2x.png images\sprites-retina\btn-basket-add@2x.png images\sprites-retina\form-checkbox@2x.png images\sprites-retina\icon-basket@2x.png images\sprites-retina\form-checkbox-active@2x.png images\sprites-retina\form-radio-active@2x.png images\sprites-retina\btn-search@2x.png

[twolfson]

The issue seems to be gulp is not loading the sprites and sprites-retina folder in the same order. We need the normal and 2x files to be loaded in the same order to resolve their pairings. Here are a few options:

• Hardcode paths instead of using globs (e.g. gulp.src(['images\sprites\icon-fav.png', 'images\sprites\form-checkbox.png', 'images\sprites\btn-basket-add.png'/*, ... */])
• Try relocating all sprites to same folder (this seems to work for most persons)
  • mv images/sprites-retina/* images/sprites
• Add a sort plugin in your pipeline
  • https://github.com/pgilad/gulp-sort
  • gulp.src('./images/**/*.png').pipe(sort()).pipe(spritesmith(/* ... */))