次世代フォーマットWEBPへの圧縮と、切り替えについて

npm install --save-dev gulp gulp-plumber gulp-notify gulp-webp gulp-rename fancy-log path

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

import plumber from 'gulp-plumber'; // エラーが発生してもタスクを停止しない
import notify from 'gulp-notify'; // エラー発生時にデスクトップ通知を行う
import webp from 'gulp-webp'; // 画像ファイルをWEBPに変換する
import rename from 'gulp-rename'; // ファイル名を変更する
import log from 'fancy-log'; // ログを抑制するためのモジュール
import path from 'path'; // パス操作用

// 参照元パス
const srcPath = {
  img: 'src/image/**/*.{png,jpg}', // 画像ファイルのソース
};

// 出力先パス
const destPath = {
  img: 'dist/image', // 画像ファイルの出力先
};

// 画像をWEBPに変換するタスク
const convertToWebP = () => (
  src(srcPath.img, { encoding: false }) // 画像ファイルのソース
    .pipe(plumber({
      errorHandler: (err) => {
        notify.onError({
          title: `Gulp error in ${err.plugin}`,
          message: err.toString()
        })(err);
      }
    })) // エラー時に通知
    .pipe(rename((filePath, file) => {
      filePath.basename += filePath.extname; // ファイル名に元の拡張子を追加
      filePath.dirname = path.relative(file.base, path.dirname(file.path)); // 元のディレクトリ構造を保持
    }))
    .pipe(webp({ quality: 85 })) // WEBPに変換
    .pipe(dest(destPath.img))
);

// デフォルトタスク（Gulpを実行した際に動くタスク）
export default series(convertToWebP);

function supportsWebP(callback) {
  var webP = new Image();
  webP.onload = webP.onerror = function () {
    callback(webP.height == 2);
  };
  webP.src = "data:image/webp;base64,UklGRhYAAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=";
}

supportsWebP(function (supported) {
  if (supported) {
    document.querySelectorAll('img').forEach(img => {
      var src = img.src;
      if (src.endsWith('.jpg') || src.endsWith('.png')) {
        img.src += '.webp';
      }
    });
  }
});