Invalid / Damaged PNG

[simplenotezy]

I managed to get it working the first time, but now, the second time I try to run sprite task, it generates an invalid PNG. I don't know what / if any thing I have changed.

I have tried removing all images inside the sprite folder, to determine if it could be a single PNG, but even the old images, that worked before, no longer works.

This is my code:

gulp.task('sprite', function () {
    var spriteData = gulp.src('assets/sprites/*.png')
        .pipe(spritesmith({
            /* this whole image path is used in css background declarations */
            imgName: '../dist/images/sprite.png',
            cssName: 'sprite.css'
        }));
    spriteData.img.pipe(gulp.dest('img'));
    spriteData.css.pipe(gulp.dest('../dist/styles'));

    return spriteData.pipe(gulp.dest('assets/styles/'));
});

The error:

The file “sprite.png” could not be opened. It may be damaged or use a file format that Preview doesn’t recognise.

Thanks in advance.

[simplenotezy]

This code fixed it:

gulp.task('sprite', function () {
  var spriteData = gulp.src('assets/sprites/*.png').pipe(spritesmith({
    imgName: '../images/sprite.png',
    cssName: '../styles/sprite.css'
  }));
  return spriteData.pipe(gulp.dest('assets/styles/'));
});

[twolfson]

Yes, the issue was we were writing 2 separate images but only letting gulp know about the final state for the second one via return spriteData.pipe

We had 2 ways to fix this:

• Use a merge-stream for the separate image and CSS streams (https://github.com/twolfson/gulp.spritesmith/issues/150#issuecomment-553613707)
• Use a common stream for both (current fix, https://github.com/twolfson/gulp.spritesmith/issues/151#issuecomment-553458496)