しゅう【Webサイト制作/コーダー】
のPortfolio Site

結論、エンコードの設定で、↓↓のXの投稿の下の方に、

簡単に解説つけて、書き方の例のコードも記載してます。

以下、X投稿全文コピペ↓↓

昨日から、gulpでいろいろ自動化してる際
「シンプルにコピーして出力してるだけなのに、画像がぶっ壊れる！」
沼にハマってましたが、
原因発見（参考ブログ）↓↓

参考にさせていただいたブログ

AIは、やっぱり新しすぎる問題には弱いっすね…
Geminiぜんぜんあてにならなかった

ググったら一撃
エンコードは意識してなかった

Gulpで、画像をsrcフォルダからpublicフォルダなんかにコピーしたとき、

シンプルにコピーだけ実行させてるはずなのに、画像が壊れてハマってました

調べて解決した原因がエンコード

参考にさせていただいたブログ

自分の使っているGulpのコードの例ですが↓↓

↓の赤字にしてある { encoding: false } を追加すると直ります。

（結局最近、他の方法メインにして、Gulpで画像変換しなくなりましたが、、、）

// コンパイル
function compileSass() {
  return (
    gulp
      .src("./src/assets/sass/style.scss", { encoding: false })
      .pipe(sass().on("error", sass.logError))
      .pipe(postcss([autoprefixer(), cssSorter()]))
      .pipe(mmq())
      .pipe(gulp.dest("./src/assets/css"))
      .pipe(gulp.dest("./assets/css"))
      .pipe(cleanCSS())
      .pipe(rename({ suffix: ".min" }))
      .pipe(gulp.dest("./assets/css"))
  );
}

Gulpが、調べた当時の2024/11月時点で、エンコードがデフォルトで「UTF-8」が当たるようになっているようです。

「UTF-8」はテキスト用のエンコードなので、画像は扱えない、、、

なのに、画像も「UTF-8」で変換してぶっ壊れてた～～

ってことです。

そこそこハマったので、参考に～～

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます