Not working with gulp 5.0.0

[sebasvil20]

I can't find a way to make gulp.spritesmith work with gulp 5.0.0.

This piece of code works perfectly with gulp 4.x with a list of png images

let sprite;
    try {
      sprite = gulp.src(srcs)
        .on('error', (err) => log.error(`Error on gulp.src: ${err.message}`))
        .pipe(spritesmith(spriteConfig))
        .on('error', (err) => {
          throw err;
        });
    } catch (err) {
      log.error(`Error caught during spritesmith execution: ${err.message}`);
      return;
    }

'srcs' is an array of sources, and gulp.src(srcs) is not returning error

But when updating to gulp 5.x starts to return Error within spritesmith pipe: Invalid file signature even tho the pngs are perfectly fine, not corrupted (Already tried to validate it and all files all perfectly fine)

Is it an issue with gulp.spritesmith and gulp 5.x ?

[sebasvil20]

Fixed it adding config for define encoding

gulp.src(srcs, { encoding: false })

Gulp 5.x added utf-8 as default encoding so it generates png images to be loaded as utf-8 and fail the validation of file signature

[twolfson]

Yay, I'm glad it all worked out =) I'll explore reproducing and updating the documentation accordingly.

My preliminary notes were:

• 5.0.0 was released 3 months ago, but shockingly low adoption (over past 7 days: 5.0.0: 200k; 4.0.2: 3.4M)
• Corruption of image files during migration or optimization gulpjs/gulp#2803 seems to be the main related issue

[twolfson]

It does seem I need to write a fix as part of the library. gulp is running with the encoding fix but the tests are failing, saying the PNG header is invalid

And I do see the test suite's sprite-default image increased from 6014 to 10571 bytes, so likely unwanted encoding happening

[sebasvil20]

Thank you for the updates! If you need more information to reproduce or test, please let me know; I'll be glad to help.

I will reopen the issue to mark it as 'pending'.

[twolfson]

I believe I've gotten to the bottom of my complications. It's from wanting an elegant single return stream, and vinyl-fs now having an encoding: "utf8" setting by default on .dest() as well

This can be seen when doing:

function streamFile(file, optResolver, onRead) {
  var encoding = optResolver.resolve('encoding', file);
  var codec = getCodec(encoding);
  console.log('wat2', encoding);
  if (encoding && !codec) {

https://github.com/gulpjs/vinyl-fs/blob/v4.0.0/lib/dest/write-contents/write-stream.js#L10-L14

I'm going to carry this fix to the rest of the tests, and if that works, then docs, and if that works, then likely open an issue complaining about the choice.

[twolfson]

The fix worked for the rest of the tests, so I've updated the docs and released it in 6.13.1

You'll need to update your Gulpfile src() and dest() to include the secondary {encoding: false} parameter

Example from updated README below

Thanks for writing this in!

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

gulp.task('sprite', function () {
  var spriteData = gulp.src('images/*.png', {encoding: false}).pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css'
  }));
  return spriteData.pipe(gulp.dest('path/to/output/', {encoding: false}));
});

EDIT: I've also opened the complaint here, gulpjs/vinyl-fs#355