升级Cordova环境后遭遇Gulp加载失败与Sass任务缺失问题求助

升级开发环境多个组件后，编译App时出现Gulp加载错误，升级前可正常编译无报错。

错误日志 #

[18:19:28] Cannot load gulp tasks: SyntaxError: Invalid or unexpected token
c:\Users\rolin\dev\myApp\node_modules\clean-css\node_modules\source-map\lib\source-map-consumer.js:1
v�gQ�Ÿ�+t�M‼N#Ÿ/↕,vEY↑]‼LtP¶A�D(ŀ����♂��be�


SyntaxError: Invalid or unexpected token
    at wrapSafe (node:internal/modules/cjs/loader:1662:18)
    at Module._compile (node:internal/modules/cjs/loader:1704:20)
    at Object..js (node:internal/modules/cjs/loader:1895:10)
    at Module.load (node:internal/modules/cjs/loader:1465:32)
    at Function._load (node:internal/modules/cjs/loader:1282:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at Module.require (node:internal/modules/cjs/loader:1487:12)
    at require (node:internal/modules/helpers:135:16)
    at Object.<anonymous> (c:\Users\rolin\dev\myApp\node_modules\clean-css\node_modules\source-map\source-map.js:7:29)[18:19:28] Cannot run sass task: missing in gulpfile.js
>

已执行的升级操作 #

初始升级 #

• cordova-cli 从11.1.0升级至v12.0
• cordova-android 从10.1.2升级至v13.0
• Node.js 从v14.22升级至v22.16
• JDK 从11升级至v17

错误出现后追加升级 #

• gulp-cli 从2.3.0升级至3.1.0
• gulp 从4.0.2升级至5.0.1

相关配置文件 #

gulpfile.js #

var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass')) ;
var cleanCss = require('gulp-clean-css');
var rename = require('gulp-rename');

var paths = {
  sass: ['./scss/**/*.scss']
};

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('./www/css/'))
    .pipe(cleanCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

gulp.task('watch', function () {
    gulp.watch(paths.sass, gulp.series('sass'));
});

gulp.task('default', gulp.series('sass','watch'));

package.json #

{
  "name": "myApp",
  "version": "0.0.1",
  "description": "An myApp project",
  "devDependencies": {
    "@ionic/v1-toolkit": "^3.2.15",
    "cordova-android": "^13.0.0",
    "cordova-clipboard": "^1.3.0",
    "cordova-plugin-console": "^1.1.0",
    "cordova-plugin-file": "^8.1.3",
    "cordova-plugin-file-downloader": "^0.4.0",
    "cordova-plugin-file-md5": "^0.3.3",
    "cordova-plugin-file-transfer": "^2.0.0",
    "cordova-plugin-network-information": "^3.0.0",
    "cordova-plugin-screensize": "^1.3.1",
    "cordova-plugin-zip": "^3.1.0",
    "gulp": "^5.0.1",
    "gulp-clean-css": "^3.7.0",
    "gulp-rename": "^1.2.0",
    "gulp-sass": "^5.1.0",
    "sass": "^1.89.2"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-screensize": {},
      "cordova-plugin-file-downloader": {},
      "cordova-clipboard": {}
    },
    "platforms": [
      "android"
    ]
  }
}

原因分析 #

1. 文件损坏/版本不兼容：错误日志中的乱码说明source-map-consumer.js文件已损坏或无法被Node.js 22正确解析。从Node.js 14跨版本升级到22后，旧node_modules中部分依赖（尤其是包含编译后二进制内容或旧语法的包）会出现兼容性问题，导致文件解析失败。
2. 核心依赖版本过旧：你的gulp-clean-css版本为3.7.0，属于老旧版本，它依赖的source-map版本不支持Node.js 22，这是引发错误的核心原因。

修复步骤 #

1. 清理旧依赖与锁文件

   • 删除项目根目录下的node_modules文件夹
   • 删除package-lock.json文件（若使用yarn则删除yarn.lock）

2. 清理npm缓存
   执行命令：

   npm cache clean --force
   

3. 升级不兼容的依赖包
   修改package.json中的gulp-clean-css版本为最新兼容版本（当前推荐^6.4.0），同时可一并升级gulp-rename到最新版本（如^2.0.0），避免其他潜在兼容问题。修改后的devDependencies相关部分：

   "gulp-clean-css": "^6.4.0",
   "gulp-rename": "^2.0.0"
   

4. 重新安装依赖
   执行命令：

   npm install
   

5. 验证修复效果
   执行Gulp的sass任务测试是否正常：

   gulp sass
   

   若无报错，再执行默认任务或编译App即可。

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