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

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」で変換してぶっ壊れてた～～

ってことです。

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

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