ノードを v12.x にアップグレードし、Gulp を v4.x にアップグレードした後に発生する問題のコレクション

 最近、ノードのバージョンを 14 にアップグレードしました。gulp を再実行すると、ここに記録されているさまざまな問題が発生しました。

【参照エラー: primordials が定義されていません】

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 バージョンはノード バージョンと互換性がありません

gulp v3.x より前のバージョンは、ノード v12 より上のバージョンでは壊れています

stackoverflow の解決策:ノードのバージョンをロールバックするか、gulp のバージョンをアップグレードする

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

長期的には、ノードのバージョンをロールバックすることは適切な選択ではありません。

最新の gulp (npm install gulp@^4.0.2) Chinese official document をインストールすることにしましたが、実行時に別の問題が発生しました。

【タスク機能を指定する必要があります】

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'));

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

文法を変更した後、操作でエラーが報告される

【以下のタスクは完了しませんでした：デフォルト】

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

各 gulp タスク (タスク) は、非同期の JavaScript 関数です. この関数は、コールバックをパラメーターとして受け取ることができる関数、またはストリーム、プロミス、イベント エミッター、子プロセス、または監視可能な型の値を返す関数です。 Gulp4 はすべて非同期タスクであり、同期タスクはありません

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

バージョンの非互換性エラーが再び発生しました:

【参照エラー: primordials が定義されていません】

[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

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 がエラーを報告する

インストールされたパッケージ graceful -fs は、 npm ls 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 (これが意図的なものである場合は、`allowEmpty` オプションを使用してください)】

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

As can see from the error message above, you only need to add {allowEmpty: true} to the gulp configuration file. 特定の場所については、次の情報を参照してください。

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

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

【 Autoprefixer browser オプションを Browserslist config に置き換えます。
  package.json または .browserslistrc ファイルの browserslist キーを使用します。】

[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

上記の情報からわかるように、ブラウザを使用するとエラーが発生するため、名前を変更して overrideBrowserslist に変更します。

構成ファイルでブラウザーを見つけて、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));
});

開発版はすぐに実行できます

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

パッケージング後に発生した問題:

【プラグイン「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 インストール [email protected] --save-dev

最新バージョンの使用が変更されたため、プロジェクトで最新バージョンを使用するのは簡単ではありません

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

【GulpUgliifyError: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 は関数ではありません】

[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)

このエラーは、プログラムの実行には影響しません。

ケース1：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 再次运行成功

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

【モジュール '@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

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

【注：コードジェネレーターは非最適化されています】

[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 入門ガイド