node升级为v12.x 和 Gulp升级为v4.x后，遇到的问题集合

 最近升级了node版本到14，重新运行gulp的时候，遇到各种问题，记录在此。

【ReferenceError: primordials is not defined】

X:\Users\xiong\git\my-app>gulp default

[16:24:14] Working directory changed to ~\git\my-app
fs.js:45
} = primordials;
    ^

ReferenceError: primordials is not defined
    at fs.js:45:5
    at req_ (X:\Users\xiong\git\my-app\node_modules\natives\index.js:140:5)
    at Object.req [as require] (X:\Users\xiong\git\my-app\node_modules\natives\index.js:54:10)
    at Object.<anonymous> (X:\Users\xiong\git\my-app\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)

发现问题：安装gulp版本与node版本不兼容的问题

gulp v3.x以下的版本在node v12以上的版本已损坏

stackoverflow上解决：回退node版本 或者 升级gulp版本

------------------------------------------------------------------------------------------------------------------------------------

从长远看，回退node版本并不是很好的选择。

我选择安装最新的gulp（npm install gulp@^4.0.2）中文官方文档，但是运行遇到另外一个问题。

【Task function must be specified】

X:\Users\xiong\git\my-app>gulp default
AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (X:\Users\xiong\git\my-app\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (X:\Users\xiong\git\my-app\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (X:\Users\xiong\git\my-app\gulpfile.js:34:6)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at requireOrImport (X:\Users\xiong\AppData\Roaming\npm\node_modules\gulp\node_modules\gulp-cli\lib\shared\require-or-import.js:19:11) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

找到问题：gulp升级到4.0后，新增语法gulp.parallel和 gulp.series

所以需要将 gulpfile 重写为新的语法新语法

旧语法：

gulp.task('less',() => {
    // default task code here
});   

gulp.task('watch', function () {
    gulp.watch(sourcePath + '/less/**/*.less', ['less']);
});

gulp.task('default',['scripts','less']);

新语法：

gulp.task('less', gulp.series(() => {
    // default task code here
}));

gulp.task('watch', function () {
    gulp.watch(sourcePath + '/less/**/*.less', gulp.series('less'));
});

gulp.task('default',gulp.series('scripts','less'));

------------------------------------------------------------------------------------------------------------------------------------

修改了语法后，运行报错

【The following tasks did not complete: default】

[11:17:28] The following tasks did not complete: default, build, <anonymous>
[11:17:28] Did you forget to signal async completion?

每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable类型值的函数。 gulp4都是异步任务，没有同步任务了

------------------------------------------------------------------------------------------------------------------------------------

又遇到版本不兼容的错误：

【ReferenceError: primordials is not defined】

[11:01:10] '<anonymous>' errored after 157 ms
[11:01:10] ReferenceError: primordials is not defined
    at fs.js:45:5
    at req_ (X:\Users\xiong\git\my-app\node_modules\natives\index.js:140:5)
    at Object.req [as require] (X:\Users\xiong\git\my-app\node_modules\natives\index.js:54:10)
    at Object.<anonymous> (X:\Users\xiong\git\my-app\node_modules\gulp-nodemon\node_modules\graceful-fs\fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:1072:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Module.require (internal/modules/cjs/loader.js:961:19)
    at require (internal/modules/cjs/helpers.js:92:18)
[11:01:10] 'serve-dev' errored after 3.14 s
[11:01:10] 'default' errored after 3.15 s

仔细看at Object.<anonymous> (X:\Users\xiong\git\my-app\node_modules\gulp-nodemon\node_modules\graceful-fs\fs.js:1:37)，是gulp-nodemon插件下依赖的graceful-fs\fs.js报错

可通过命名 npm ls graceful-fs  列出已安装的软件包graceful-fs

可以看到有些插件的graceful-fs包并没有更新到最新版本

X:\Users\xiong\git\my-app>npm ls graceful-fs
my-app@2.2.6 X:\Users\xiong\git\my-app
+-- browser-sync@2.24.7
| +-- chokidar@1.7.0
| | `-- readdirp@2.2.1
| |   `-- graceful-fs@4.1.11  deduped
| +-- fs-extra@3.0.1
| | +-- graceful-fs@4.1.11  deduped
| | `-- jsonfile@3.0.1
| |   `-- graceful-fs@4.1.11  deduped
| `-- yargs@6.4.0
|   `-- read-pkg-up@1.0.1
|     `-- read-pkg@1.1.0
|       +-- load-json-file@1.1.0
|       | `-- graceful-fs@4.1.11  deduped
|       `-- path-type@1.1.0
|         `-- graceful-fs@4.1.11  deduped
+-- gulp@4.0.2
| `-- vinyl-fs@3.0.3
|   +-- fs-mkdirp-stream@1.0.0
|   | `-- graceful-fs@4.1.11  deduped
|   +-- graceful-fs@4.1.11  deduped
|   `-- vinyl-sourcemap@1.1.0
|     `-- graceful-fs@4.1.11  deduped
+-- gulp-imagemin@2.4.0
| `-- imagemin@4.0.0
|   +-- imagemin-gifsicle@4.2.0
|   | `-- gifsicle@3.0.4
|   |   `-- bin-build@2.2.0
|   |     +-- decompress@3.0.0
|   |     | `-- vinyl-fs@2.4.4
|   |     |   +-- graceful-fs@4.1.11  deduped
|   |     |   `-- gulp-sourcemaps@1.6.0
|   |     |     `-- graceful-fs@4.1.11  deduped
|   |     `-- download@4.4.3
|   |       `-- vinyl-fs@2.4.4
|   |         +-- graceful-fs@4.1.11  deduped
|   |         `-- gulp-sourcemaps@1.6.0
|   |           `-- graceful-fs@4.1.11  deduped
|   `-- vinyl-fs@2.4.4
|     +-- graceful-fs@4.1.11  deduped
|     `-- gulp-sourcemaps@1.6.0
|       `-- graceful-fs@4.1.11  deduped
+-- gulp-jscs@2.0.0
| `-- jscs@2.11.0
|   `-- babel-jscs@2.0.5
|     `-- babel-core@5.8.38
|       +-- output-file-sync@1.1.2
|       | `-- graceful-fs@4.1.11  deduped
|       `-- regenerator@0.8.40
|         `-- commoner@0.10.8
|           `-- graceful-fs@4.1.11  deduped
+-- gulp-jshint@1.12.0
| `-- jshint@2.9.6
|   +-- phantom@4.0.12
|   | `-- phantomjs-prebuilt@2.1.16
|   |   `-- fs-extra@1.0.0
|   |     +-- graceful-fs@4.1.11  deduped
|   |     `-- jsonfile@2.4.0
|   |       `-- graceful-fs@4.1.11  deduped
|   `-- phantomjs-prebuilt@2.1.16
|     `-- fs-extra@1.0.0
|       +-- graceful-fs@4.1.11  deduped
|       `-- jsonfile@2.4.0
|         `-- graceful-fs@4.1.11  deduped
+-- gulp-less@3.5.0
| `-- less@2.7.3
|   `-- graceful-fs@4.1.11  deduped
+-- gulp-nodemon@2.2.1
| +-- gulp@3.9.1
| | `-- vinyl-fs@0.3.14
| |   `-- graceful-fs@3.0.12
| `-- nodemon@1.19.4
|   `-- update-notifier@2.5.0
|     `-- configstore@3.1.5
|       +-- graceful-fs@4.2.8
|       `-- write-file-atomic@2.4.3
|         `-- graceful-fs@4.2.8
+-- gulp-rev@5.1.0
| `-- vinyl-file@1.3.0
|   `-- graceful-fs@4.1.11  deduped
+-- gulp-sourcemaps@1.12.1
| `-- graceful-fs@4.1.11
+-- gulp-useref@1.3.0
| `-- vinyl-fs@1.0.0
|   +-- glob-watcher@0.0.8
|   | `-- gaze@0.5.2
|   |   `-- globule@0.1.0
|   |     `-- glob@3.1.21
|   |       `-- graceful-fs@1.2.3
|   `-- graceful-fs@3.0.11
+-- karma@0.13.22
| `-- graceful-fs@4.1.11  deduped
+-- nodemon@2.0.12
| `-- update-notifier@4.1.3
|   `-- configstore@5.0.1
|     `-- graceful-fs@4.1.11  deduped
+-- phantomjs@1.9.20
| `-- fs-extra@0.26.7
|   +-- graceful-fs@4.1.11  deduped
|   +-- jsonfile@2.4.0
|   | `-- graceful-fs@4.1.11  deduped
|   `-- klaw@1.3.1
|     `-- graceful-fs@4.1.11  deduped
+-- plato@1.7.0
| +-- eslint@3.0.1
| | `-- file-entry-cache@1.3.1
| |   `-- flat-cache@1.3.0
| |     `-- graceful-fs@4.1.11  deduped
| `-- fs-extra@0.30.0
|   +-- graceful-fs@4.1.11  deduped
|   `-- jsonfile@2.4.0
|     `-- graceful-fs@4.1.11  deduped
`-- wiredep@2.2.2
  `-- bower-config@0.5.3
    `-- graceful-fs@2.0.3

stackoverflow上解决：如何修复 Node.js 中的“ReferenceError: primordials is not defined”

 npm-force-resolutions会更改package-lock.json文件来设置graceful-fs到你想要的版本。这个方法每次执行npm install都会生效。github上项目   npm包

// 在paskge.json里面添加以下信息
// npm-force-resolutions：强制npm安装特定的传递依赖项版本
{
  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  },
  "resolutions": {
    "graceful-fs": "^4.2.4"
  }
}
添加后的packge.json
{
  "name": "my-app",
  "description": "my-app",
  "version": "1.0.0",
  "author": "xjx",
  "scripts": {
    "init": "npm install",
    "install": "bower install",
    "start": "node src/server/app.js",
    "preinstall": "npx npm-force-resolutions"
  },
  "dependencies": {
    "express": "^4.9.3",
  },
  "devDependencies": {
    "gulp": "^4.0.2"
  },
  "resolutions": {
    "graceful-fs": "^4.2.4"
  }
}

------------------------------------------------------------------------------------------------------------------------------------

经过以上操作后，gulp已经能运行，但是配置里面部分插件语法变动，需要慢慢修改

【 Error: File not found with singular glob: X:/Users/xiong/git/my-app/build (if this was purposeful, use `allowEmpty` option)】

X:\Users\xiong\git\my-app>gulp default
[15:21:53] Using gulpfile ~\git\my-app\gulpfile.js
[15:21:53] Starting 'default'...
[15:21:53] Starting 'serve-dev'...
[15:21:53] Starting 'inject'...
[15:21:53] Starting 'clean'...
[15:21:53] Cleaning: ./build/,./.tmp/,./report/
[15:21:53] 'clean' errored after 268 ms
[15:21:53] Error: File not found with singular glob: X:/Users/xiong/git/my-app/build (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (X:\Users\xiong\git\my-app\node_modules\glob-stream\readable.js:84:17)
    at Object.onceWrapper (events.js:520:26)
    at Glob.emit (events.js:400:28)
    at Glob.emit (domain.js:470:12)
    at Glob._finish (X:\Users\xiong\git\my-app\node_modules\glob-stream\node_modules\glob\glob.js:195:8)
    at done (X:\Users\xiong\git\my-app\node_modules\glob-stream\node_modules\glob\glob.js:180:14)
    at Glob._processSimple2 (X:\Users\xiong\git\my-app\node_modules\glob-stream\node_modules\glob\glob.js:686:12)
    at X:\Users\xiong\git\my-app\node_modules\glob-stream\node_modules\glob\glob.js:674:10
    at Glob._stat2 (X:\Users\xiong\git\my-app\node_modules\glob-stream\node_modules\glob\glob.js:770:12)
    at lstatcb_ (X:\Users\xiong\git\my-app\node_modules\glob-stream\node_modules\glob\glob.js:762:12)
[15:21:53] 'inject' errored after 270 ms
[15:21:53] 'serve-dev' errored after 271 ms
[15:21:53] 'default' errored after 273 ms

通过上边的报错信息可以看出来，只需要在 gulp 配置文件中添加  {allowEmpty: true} ，具体添加位置看如下信息：

gulp.task('clean', function () {
  return gulp.src(['./build','./dist'], {allowEmpty: true}, {read: false})
    .pipe($.clean());
});

------------------------------------------------------------------------------------------------------------------------------------

【 Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.】

[15:32:11] Starting 'styles'...
[15:32:11] Compiling Less --> CSS

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config can
  be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

通过上边信息可以看出来：使用browsers会出错，重命名为overrideBrowserslist

在配置文件中查找browsers替换为overrideBrowserslist

gulp.task('styles', function () {
  log('Compiling Less --> CSS');

  return gulp
    .src(config.less)
    .pipe($.plumber()) // plumber : 错误处理，继续向下运行
    .pipe($.less())
    .pipe($.autoprefixer({
      // browsers: ['last 2 version', '> 5%']
      overrideBrowserslist: ['last 2 version', '> 5%']
    }))
    .pipe(gulp.dest(config.temp));
});

dev版本已经能跑起来了

------------------------------------------------------------------------------------------------------------------------------------ 

打包后遇到的问题：

【 Error in plugin "gulp-imagemin"】

[17:20:24] Compressing and copying images
[17:20:25] 'images' errored after 1.14 s
[17:20:25] Error in plugin "gulp-imagemin"
Message:
    spawn X:\Users\xiong\git\my-app\node_modules\mozjpeg\vendor\cjpeg.exe ENOENT
Details:
    code: ENOENT
    errno: ENOENT
    syscall: spawn X:\Users\xiong\git\my-app\node_modules\mozjpeg\vendor\cjpeg.exe
    path: X:\Users\xiong\git\my-app\node_modules\mozjpeg\vendor\cjpeg.exe
    spawnargs:
    stdout:
    stderr: ϵͳ�Ҳ���ָ����·����

    failed: true
    signal: null
    cmd: X:\Users\xiong\git\my-app\node_modules\mozjpeg\vendor\cjpeg.exe
    timedOut: false
    killed: false
    fileName: X:\Users\xiong\git\my-app\src\client\images\no_company.jpg
    domainEmitter: [object Object]
    domainThrown: false

 重新npm install gulp-imagemin@7.0.0 --save-dev

再次运行就好了，因为最新版的使用方式已改变，项目中不好使用最新版本

------------------------------------------------------------------------------------------------------------------------------------  

【GulpUglifyError: unable to minify JavaScript】 

[18:02:53] [Error] GulpUglifyError: unable to minify JavaScript
Caused by: SyntaxError: Unexpected token: operator «>»
File: X:\Users\xiong\git\my-app\src\client\app\component\messages.controller.js
Line: 53
Col: 29

查找出错的地方使用了es6语法，看编译的时候也使用了$.babel()转码，排除babel的问题，

后来再看到一个说是重复压缩问题，仔细查看确实是重复使用了$.uglify() ，删掉多余$.uglify()

运行正常

------------------------------------------------------------------------------------------------------------------------------------  

【TypeError: $.print is not a function】

[16:58:14] Analyzing source with JSHint and JSCS
[16:58:14] 'vet' errored after 134 ms
[16:58:14] TypeError: $.print is not a function
    at X:\Users\xiong\git\my-app\gulpfile.js:33:32
    at vet (X:\Users\xiong\git\my-app\node_modules\undertaker\lib\set-task.js:13:15)
    at bound (domain.js:416:15)
    at runBound (domain.js:427:12)
    at asyncRunner (X:\Users\xiong\git\my-app\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:77:11)

这个报错不影响程序运行。

第一种情况：gulp-print插件更新后，使用方式变动

var print = require('gulp-print');

print.default() // usage

第二种情况：按第一种情况修改后，仍报错。
查看package.json里面的"gulp-print": "^5.0.2"是也最新的，还是出现问题。
重新安装最新的gulp-print：删除package.json里面的"gulp-print": "^5.0.2"这一行代码，删除node_modules下的gulp-print文件夹，重新npm install gulp-print --save-dev 再次运行成功

------------------------------------------------------------------------------------------------------------------------------------  

【Cannot find module '@babel/preset-env'】

[13:34:01] Plumber found unhandled error:
 Error in plugin "gulp-babel"
Message:
    Cannot find module '@babel/preset-env'

npm install  @babel/preset-env --save-dev

------------------------------------------------------------------------------------------------------------------------------------  

【 Note: The code generator has deoptimised】

[14:21:57] gulp-inject 1 file into index.html.
[BABEL] Note: The code generator has deoptimised the styling of "X:/Users/xiong/git/my-app/src/client/js/renwey.js" as it exceeds the max of "500KB".

添加.babelrc文件

{
  "compact": false,
  "presets": ["env"]
}

相关资料：

前端自动化gulp遇上es6从 无知到深爱

Gulp4.0入门指南