4/3 追記
GulpがVersion 5にアップデートされました。
Announcing Gulp v5
はじめに
今まで画像圧縮はオンラインツールを使っていたのですが、今さら自動化しようと思い
npm packageのimageminを使おうとしたのがきっかけです。
imageminはVersion 8 からES ModulesになったようなのでgulpfileもCommonJSからES Modulesへ書き換えることにしました。
環境
- Node
- Ver. 20.9.0
- npm
- Ver. 10.1.0
- Gulp
- CLI Ver. 2.3.0 Local Ver. 4.0.2
- Gulpはnpxで実行しています
手順
- gulpfile.jsの拡張子をgulpfile .mjs にリネーム。拡張子を変更したくない場合はpackage.jsonに
"type": "module"を追記
package.json
"main": "gulpfile.mjs",
"type": "module",
2. gulpfile.mjsの中で、require文で読み込んでいたモジュールをimport文に置き換えます
gulpfile.mjs
// CommonJS
const { src, dest, series, parallel, watch } = require('gulp');
// ES Modules
import pkg from 'gulp';
const { src, dest, series, parallel, watch } = pkg;
3. gulpfile.mjsの最後にexport defaultを使ってデフォルトのタスクをエクスポートします
状況に合わせてseries()、parallel()をお使い下さい
gulpfile.mjs
// CommonJS
exports.default = parallel(タスク);
// ES Modules
export default parallel(タスク);
最後に
import文に書き換えるだけと思い、
gulpfile.mjs
import { src, dest, series, parallel, watch } from 'gulp';
と書き換えて実行したらSyntax Errorが出てしまいました。
SyntaxError: Named export 'dest' not found. The requested module 'gulp' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
でも、親切に代替案として手順2のコードを提示してくれました。
調べるとnpm packageのESMをインストールする等、他にも方法があるようですが自分はまだ試していません。