Gulp v5.0.0 + gulp-imagemin で画像が壊れる？？ 対処法

WordPressネタではなくなってしまうけれど、Gulpに関する自分へのネタです。
先日、タスクランナーのGulpがおよそ5年ぶりのアップデートとして、v5.0.0がリリースされました。

gulp-imagemin で圧縮を行った画像ファイルが壊れてしまう

私もいろんな作業をGulpを使って自動化しているのですが、Gulpをv5.0.0にアップデートした途端、画像ファイルを圧縮したはずなのに、２倍くらいの重さになり（？？）、しかもデータが壊れて開くこともできない…、という状態になりました。

慌てて、Gulpをv4に戻して作業を続けていましたが、最近解決法をアップされている記事を見つけたので助けられました。メモとしてストックしておきます。

原因は、画像ファイルもUTF-8エンコーディングされてしまうこと？

今回追加されたUTF-8エンコーディングが、画像にも行われることが原因っぽいとのことです。

対処法

gulpfile.mjsの、srcの部分に{encoding: false}を追加します。
これだけで正常に動作するようになりました。

参考までに、私の使っている画像圧縮のコードです。（ハイライトした21行目）
※ECMAScript Modules（ESM）構文へ移行しているので、gulp-imageminのv8系以降にも対応しています。

gulpfile.mjs

import gulp from 'gulp';  // gulpをインポート
const { series, parallel, src, dest, watch } = gulp; // series, parallel, src, dest, watchがそのまま使えるように

// 画像圧縮 関連インポート ---------------------------------------------
import imagemin, {mozjpeg, svgo} from 'gulp-imagemin'; // 画像の圧縮
import pngquant from 'imagemin-pngquant'; // PNG画像はこのプラグインが軽量化率高い
import changed from 'gulp-changed'; // 更新されたファイルのみ処理

// 参照元パス
const srcPath = {
  img: './src/images/**/*',
};

// 出力先パス
const destPath = {
  img: './dest/images',
};

// 画像圧縮
const ImgImagemin = () => (
  src(srcPath.img, {encoding: false}) // 圧縮するファイルを指定
    .pipe(changed(destPath.img)) // srcとdestを比較して異なるものだけ圧縮する
    .pipe(imagemin([
      mozjpeg({quality: 90, progressive: true}), // JPEG画像の圧縮設定
      pngquant({  // PNG画像の圧縮設定
        quality: [0.8, 0.95],
        speed: 1,
      }),
      svgo({ // SVG画像の圧縮設定
        plugins: [
          {
            name: 'removeViewBox',
            active: true
          },
          {
            name: 'cleanupIDs',
            active: false
          }
        ]
      })
    ],{
      verbose: true // ログ情報出力
    }))
  .pipe(dest(destPath.img)) // 出力先ディレクトリを指定
);

export { ImgImagemin };

// srcフォルダを監視
const watchFiles = (done) => {
  // 更新があれば、以下のタスクを実行
  watch(srcPath.img, ImgImagemin);
  done(); //done()でタスク完了
};

export default series(ImgImagemin, watchFiles); 

package.json

{
  "name": "imagemin_esm",
  "version": "1.0.0",
  "description": "",
  "exports": "./index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^5.0.0",
    "gulp-changed": "^5.0.2",
    "gulp-imagemin": "^9.1.0",
    "imagemin-mozjpeg": "^10.0.0",
    "imagemin-pngquant": "^10.0.0",
    "imagemin-svgo": "^11.0.0"
  },
  "type": "module"
}

以下のサイト様を参考にさせていただきました。ありがとうございます。

参考サイト

（調査メモ）gulp5で画像ファイルが壊れた場合の対処

The post Gulp v5.0.0 + gulp-imagemin で画像が壊れる？？ 対処法 appeared first on WordPress Note.