3
3

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

Last updated at Posted at 2024-05-12

結論

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タスクをエンコード用 / 非エンコード用で分ける必要あり?

参照

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3