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

結論

srcに{encoding: false}をつける

問題

gulp5が2024/03/29に正式ローンチされたので、自前の開発環境をアップデートしようとした。
基本的にはgulp4のgulpfile.jsのままで動いたが、静的ファイルをコピーするタスクで、jpg, png画像が表示されなくなってしまった（コピー後のファイルが破損してしまった）。
svg, txtファイルは正しくコピーできていた。

原因

gulp5のchangelogにある

Default stream encoding to UTF-8

の影響と思われる。

対処方法

gulpのissueに記載があり、srcに{encoding: false}をつけるとよいとのこと

以下の変更で動いた。

const assets = () => {
  return src(developDir + 'static/**/*')
  .pipe(dest('./preview/'))
}

↓

const assets = () => {
  return src(developDir + 'static/**/*', {encoding: false})
  .pipe(dest('./preview/'))
}

画像ファイルもUTF-8エンコーディングされてしまっていたらしい。
エンコードしたい場合は、gulpタスクをエンコード用 / 非エンコード用で分ける必要あり？

参照

• 同事象のstackoverflow
  https://stackoverflow.com/questions/78391263/copying-image-with-gulp?newreg=68810ff10e5649dbabfa475c54353965

• 同事象のgithubのissue
  https://github.com/gulpjs/gulp/issues/2777#issuecomment-2036776560

• gulp5の更新のお知らせ
  https://medium.com/gulpjs/announcing-gulp-v5-c67d077dbdb7

• gulp5のchangelog
  https://github.com/gulpjs/gulp/blob/master/CHANGELOG.md#500-2024-03-29