v5: after updating gulp to version 5, jpg and png files are not readable after src-dest processing

[llcawc]

v5: after updating gulp to version 5, jpg and png files are not readable after src-dest processing

gulpfile.js

const { src, dest } = require("gulp");

function images() {
  return src("src/**/*.{jpg,png}").pipe(dest("dist"));
}

exports.images = images;

package.json

{
  "name": "images",
  "version": "1.0.0",
  "license": "MIT",
  "description": "",
  "main": "",
  "scripts": {
    "images": "gulp images"
  },
  "dependencies": {
    "gulp": "^5.0.0"
  }
}

OS & version: WSL1 Debian and WSL2 Ubuntu (on base Windows11)

$ node -v
v20.12.1
$ npm -v
10.5.0
$ yarn -v
1.22.22
$ gulp -v
CLI version: 3.0.0
Local version: 5.0.0

[david-sesma]

Same problem here, solved it using the option encoding: false on the src function. Dunno if it's the new release default behaviour or a bug: https://medium.com/gulpjs/announcing-gulp-v5-c67d077dbdb7#8f65 on Stream encoding.

[madjacky]

Same Problem :(
`
import { src, dest, series, watch } from 'gulp';

const srcFolder = './src';
const buildFolder = './dist';

const srcPaths = {
srcScssFolder: ${srcFolder}/scss/**/*.scss,
srcLayoutFolder: ${srcFolder}/layout,
srcImagesFolder: ${srcFolder}/img
}

const buildtPaths = {
buildCssFolder: ${buildFolder}/css,
buildImagesFolder: ${buildFolder}/img
}
const images = () => {
return src([${srcPaths.srcImagesFolder}/**/**.{jpg,jpeg,png,svg}])
.pipe(dest(buildtPaths.buildImagesFolder))
}
const watchFiles = () => {
browserSync.init({
server: {
baseDir: ${buildFolder}
},
});
watch(${srcPaths.srcImagesFolder}/**/**.{jpg,jpeg,png,svg}, images);
}
export default series(images, watchFiles);
`

[phated]

The helplessness is astounding around here 🤣

#2777 (comment)

[llcawc]

well, that's why I need this {encoding:false} setting when everything was working earlier!

[Patta]

@phated maybe pin/link the medium article as temp solution somewhere for people who do not check resolved issues. Or add an issue template with instructions to check closed issues before adding duplicates.

[llcawc]

I'll leave it here.
Here is the solution to the problem : we need to add the {encoding:false} in the src() function option.
This is not yet available in the gulp documentation.
And as it turned out this is not a gulp-imagemin problem.
for example, like this:

// images task
function images() {
  return src(baseDir + '/assets/images/**/*.*', { base: baseDir, encoding: false })
    .pipe(changed(distDir))
    .pipe(
      imagemin(
        [
          gifsicle({ interlaced: true }),
          mozjpeg({ quality: 75, progressive: true }),
          optipng({ optimizationLevel: 5 }),
          svgo({ plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false } } }] }),
        ],
        { verbose: true }
      )
    )
    .pipe(dest(distDir))
}

[yocontra]

Docs have been updated: https://github.com/gulpjs/gulp/blob/master/docs/api/src.md#options

You need to add { encoding: false } for binary files.