Gulp環境でWebPを生成する

Gulp環境でimagemin-webpを使用して、WebPを扱えるようにしてみます。

設定方法

今回は以前投稿したこちらの記事のGulp環境に追加してみます。
使用するパッケージをインストールします。

npm install imagemin imagemin-webp --save-dev

task/img.mjsを作成して、以下の内容にします。

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';

export async function img_task(cd) {
  await imagemin(['src/img/**/*.{jpg,png}'], {
    destination: 'htdocs/assets/img',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });
  cd();
}

今回はsrc/img/ 内のjpg・pngファイルを対象にして、htdoce/assets/img/ 内に出力されるようにしています。
gulpfile.mjsでタスクを実行できるようにします。

import { img_task } from "./task/img.mjs";
export {img_task as img};

テスト用の画像を配置した上で下記コマンドを実行すると、WebPへの変換を行うことができました。

npx gulp img

LP単体での作成時など画像のディレクトリ構造が分かれていない場合は上記内容でも問題ないのですが、imagemin-webp(というよりimagemin自体)を使用した際に、変換前のディレクトリ構造を維持できないようです。
そのため、ディレクトリ構造を維持するための処理を別途用意する必要があります。

変換前のファイルパスを取得するため、globuleを追加します。

npm install globule --save-dev

img.ejsを下記のように変更します。

import imagemin from 'imagemin';
import imageminWebp from 'imagemin-webp';
import globule from 'globule';

export async function img_task(cd) {
  // 変換前のファイルパス取得
  const imgPaths = globule.find({
    src: ['src/img/**/*.{jpg,png}']
  });

  // ファイルパス毎にWebPへの変換を行う
  for (const imgPath of imgPaths) {
    // 出力先パスの生成
    let destinations = imgPath.replace('src/img/', 'htdocs/assets/img/').split('/');
    destinations.pop();
    destinations = destinations.join('/');

    await imagemin([imgPath], {
      destination: destinations,
      plugins: [
        imageminWebp({quality: 50})
      ]
    });
  }
  cd();
}

これでディレクトリ構造通りにファイルの出力ができました。