运行gulp命令出现Error [ERR_REQUIRE_ESM]错误求助

报错原因 #

gulp-imagemin v8.0及以上版本仅支持ESM模块规范，不再兼容CommonJS的require()导入语法，这是你收到该报错的核心原因。你之前修改配置未生效，要么是ESM配置未完全匹配，要么是没有同步处理其他依赖的导入规则。

解决方案 #

方案1：降级gulp-imagemin（最适合新手，无需修改现有代码逻辑） #

直接安装最后一个支持CommonJS的gulp-imagemin版本即可：

• 先卸载当前版本：npm uninstall gulp-imagemin
• 安装兼容版本：npm install gulp-imagemin@7.1.0
  安装完成后直接运行gulp命令即可正常执行任务。

方案2：完整适配ESM规范（如果需要使用高版本gulp-imagemin） #

按以下步骤完整配置，避免部分修改导致的不生效问题：

1. 在package.json中添加配置："type": "module"
2. 将gulpfile.js中所有require语法替换为import，修改后的导入部分如下：

import { src, dest, watch, series } from 'gulp';
import sass from 'gulp-sass';
import prefix from 'gulp-autoprefixer';
import minify from 'gulp-clean-css';
import terser from 'gulp-terser';
import imagemin from 'gulp-imagemin';
import imagewebp from 'gulp-webp';

3. 其余函数逻辑保持不变即可，完成后运行gulp命令。

额外代码问题修复 #

你当前的gulpfile.js中还有两处逻辑错误，即使解决了模块导入问题也会导致任务执行失败，请同步修改：

1. compilescss函数中dest('/dist/css')路径开头多写了根路径斜杠，会将编译后的css输出到磁盘根目录而非项目目录，改为dest('dist/css')
2. webpImage函数中最后一行.pipe('dist/img')缺少dest()方法包裹，改为.pipe(dest('dist/img'))

内容的提问来源于stack exchange，提问作者Bipul Roy