after updating gulp to version 5, jpg and png files compressed by the gulp-imagemin plugin are not readable

[llcawc]

after updating gulp to version 5, jpg and png files compressed by the gulp-imagemin plugin are not readable

[llcawc]

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

[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))
}

[madjacky]

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))
}

Oh thanks man, I’ve been struggling with this question for 18 hours. here is my gulpfile code ` const srcFolder = './src'; const buildFolder = './app';

const srcPaths = { srcImagesFolder: ${srcFolder}/img, }; const appPaths = { buildImagesFolder: ${buildFolder}/img, };

const images = () => { return src([${srcPaths.srcImagesFolder}/**/**.{jpg,jpeg,png,svg}], { encoding: false }) .pipe(dest(buildtPaths.buildImagesFolder)) } `

[juanlopezdev]

Curiously, it worked for me only in the CommonJS version of Gulp, adding what the friend mentioned about { encoding: false }, but in the ESM version it does not work, nor does it add the images to the folder where they should go, nor does it throw an error.

Some details:

Code:

export function images() {
    return src(paths.html.src, { encoding: false })
        .pipe(imagemin())
        .pipe(dest(paths.html.dest));
}

With ESM:

[17:48:19] Starting 'images'...
gulp-imagemin: Minified 0 images
[17:48:19] Finished 'images' after 105 ms

Without ESM but with CommonJS

[17:51:17] Using gulpfile ~/projects/FrontendTemplateContinental/gulpfile.js
[17:51:17] Starting 'optimage'...
[17:51:17] Starting 'imagesOptimize'...
[17:51:17] Finished 'imagesOptimize' after 50 ms
[17:51:17] Finished 'optimage' after 52 ms
gulp-imagemin: Minified 1 image (saved 2.14 MB - 64.7%)

Gulp version

• CLI version: 3.0.0
• Local version: 5.0.0

Node

v20.11.1

[madjacky]

for me after updating gulp to version 5 when i start gulp console shows gulp-imagemin: Minified 1 image (saved 119 kB - 48.2%) but when i check sizes in src & dist are same

const images = () => {
  return src([`${paths.imagesFolder.src}/**/**.{jpg,jpeg,png,svg}`], { encoding: false })
    .pipe(gulpif(isProd, imagemin([
      mozjpeg({
        quality: 60,
        progressive: true
      }),
      optipng({
        optimizationLevel: 2
      }),
    ])))
    .pipe(dest(paths.imagesFolder.dist))
}

gulp-imagemin: Minified 1 image (saved 119 kB - 48.2%)

[keevvinc]

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))
}

if it is not in the docs, may i know how did you found this out? it amazes me, lol

[llcawc]

` .... /**/**.{jpg,jpeg,png,svg}`

The wrong globe should be like this: .... /**/*.{jpg,jpeg,png,svg}

[llcawc]

if it is not in the docs, may i know how did you found this out? it amazes me, lol

Yes, this problem is not yet in the documentation on the site gulpjs.com , but after I submitted the problem, a fix was made in the gulp github documentation here. And I found out about it by studying gulp closed issues

[madjacky]

` .... /**/**.{jpg,jpeg,png,svg}`

The wrong globe should be like this: .... /**/*.{jpg,jpeg,png,svg}

Correct me if I’m wrong, but if the glob pattern was incorrect, would it have worked? I mean, after running the gulp command, images appear in the dist/assets/images folder, but for some reason, the imagemin plugin doesn’t optimize them, although, for example, the gulp-webp plugin with the same glob pattern works perfectly

[llcawc]

Correct me if I’m wrong, but if the glob pattern was incorrect, would it have worked? I mean, after running the gulp command, images appear in the dist/assets/images folder, but for some reason, the imagemin plugin doesn’t optimize them, although, for example, the gulp-webp plugin with the same glob pattern works perfectly

I can't tell you the answer, because I have to check it in my work. But I recommend enabling hints with the {verbose:true} directive

const images = () => {
  return src([`${paths.imagesFolder.src}/**/*.{jpg,jpeg,png,svg}`], { encoding: false })
    .pipe(
        gulpif( isProd, 
          imagemin(
            [ 
            mozjpeg({ quality: 60, progressive: true }),
            optipng({ optimizationLevel: 2 }),
            ], { verbose: true } )))
    .pipe(dest(paths.imagesFolder.dist))
}

[llcawc]

The problem is solved