最近升级了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
[email protected] X:\Users\xiong\git\my-app
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected] deduped
| +-- [email protected]
| | +-- [email protected] deduped
| | `-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| +-- [email protected] deduped
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected]
| | | `-- [email protected]
| | | +-- [email protected] deduped
| | | `-- [email protected]
| | | `-- [email protected] deduped
| | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected] deduped
| | `-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
| +-- [email protected] deduped
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| | +-- [email protected] deduped
| | `-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
| `-- [email protected]
| +-- [email protected] deduped
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
| `-- [email protected]
| `-- [email protected]
| +-- [email protected]
| `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| `-- [email protected]
+-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| `-- [email protected]
| +-- [email protected] deduped
| +-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
| `-- [email protected] deduped
+-- [email protected]
| +-- [email protected]
| | `-- [email protected]
| | `-- [email protected]
| | `-- [email protected] deduped
| `-- [email protected]
| +-- [email protected] deduped
| `-- [email protected]
| `-- [email protected] deduped
`-- [email protected]
`-- [email protected]
`-- [email protected]
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 [email protected] --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"]
}
相关资料：