【gulp】imageminを使用する際のESモジュールエラーを解決する方法

Gulpを使って画像の最適化を行おうとした際に、以下のようなエラーに遭遇することがあります。

Error [ERR_REQUIRE_ESM]: require() of ES Module

このエラーは、gulp-imageminなどのライブラリがESモジュールとして実装されており、従来のCommonJS形式のrequire()では解決できないことを示しています。

gulpfile.jsを修正する

gulpfile.jsでのライブラリのインポートを、ESモジュールのimport文に変更します。

import { src, dest } from 'gulp';
import imagemin from 'gulp-imagemin';

import文を使用したgulpfile.jsの例

以下はimport文を使用したgulpfile.jsの例です。

// gulpfile.js

// gulpモジュールから必要な関数をインポートする
import { src, dest, series } from 'gulp';

// gulp-imageminモジュールをインポートする
import imagemin from 'gulp-imagemin';

// 画像の圧縮タスクを定義する
export function optimizeImages() {
  // 画像ファイルのソースパスを指定
  return src('src/images/**/*.{jpg,jpeg,png,gif,svg}')
    // imageminで画像を圧縮する
    .pipe(imagemin([
      // JPEG圧縮オプション
      imagemin.mozjpeg({ quality: 75, progressive: true }),
      // PNG圧縮オプション
      imagemin.optipng({ optimizationLevel: 5 }),
      // SVG圧縮オプション
      imagemin.svgo({
        plugins: [
          { removeViewBox: true }, // viewBox属性の削除
          { cleanupIDs: false }    // IDのクリーンアップを無効化
        ]
      })
    ]))
    // 圧縮後の画像を出力するディレクトリを指定
    .pipe(dest('dist/images'));
}

// デフォルトタスクを定義する
export default series(optimizeImages);

package.jsonの設定を確認する

“type”: “module”がpackage.jsonに追加されていることを確認してください。

{
  "type": "module",
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-imagemin": "^7.1.0"
  }
}

これにより、Node.jsがファイルをESモジュールとして解釈するよう指示します。

Node.jsのバージョンを確認する

Node.jsのバージョンがv12以上であることを確認してください。ESモジュールのサポートはNode.js v12から導入されました。

node --version

実行

上記の変更を行った後、通常通りにgulpを実行してください。

gulp

まとめ

Gulpを使用して画像を最適化する際にESモジュールエラーが発生する場合、gulpfile.jsでのインポートをESモジュール形式に修正し、package.jsonに”type”: “module”を追加することで解決できます。これにより、Node.jsの最新機能を活用しつつ、スムーズな開発作業を行うことができます。