Gulp3 => Gulp4 移行 エラー【 primordials is not defined 】

# Gulp3からGulp4へ:airplane:
今回Gulp3からGulp4へ(何回書くねん:imp:)移行したのですがその際に出たエラーについて共有
アップデートは[npm-check-updates](https://www.npmjs.com/package/npm-check-updates)というツールを使いnpmライブラリを総括アップデートを行いました。

### エラー内容:see_no_evil:
アップデート後gulpコマンドが叩けるかを確認するために

```js:index.js
import gulp from 'gulp'
import { compileStylus } from './tasks/stylus'

exports.default = gulp.series(
	compileStylus 
)
//↑gulpと叩くとcompileStylusというタスクを実行するよ〜という処理
```

```js:./tasks/stylus.js
import gulp from 'gulp'
import plumber from 'gulp-plumber'
import runSequence from 'run-sequence'
import del from 'del'
import header  from 'gulp-header'
import stylus from 'gulp-stylus'
import pleeease from 'gulp-pleeease'
import csscomb from 'gulp-csscomb'
import sourcemaps from 'gulp-sourcemaps'
import jeet  from 'jeet'
import axis from 'axis'
import paths from '../paths'
import rupture from 'rupture'

export const compileStylus = () => {
	return gulp
	       .src([paths.stylusPath + '/*.styl','!' + paths.stylusPath + '/_*/*.styl'])
	       .pipe(plumber())
	       .pipe(sourcemaps.init())
	       .pipe(stylus({
				use:[ axis(), jeet(), rupture()]
				})
			)
	       .pipe(
				pleeease({
					minifier: false,
					autoprefixer: {"browsers": ["last 4 versions"]}
				})
			)
	       .pipe(csscomb())
				.on('error', console.error.bind(console))
				.pipe (header('@charset "utf-8";\n'))
				.pipe (gulp.dest(paths.distCss))
}
```

と二つのファイルを用意し

```terminal:terminal
hogehoge $ gulp 
//index.jsの中身を実行する。
```
と叩くと

```terminal:terminal
[17:48:43] Requiring external module @babel/register
fs.js:35
} = primordials;
    ^

ReferenceError: primordials is not defined
    at fs.js:35:5
    at req_ ~~~~~
```
とよくわからないエラーが出てきました。:poop:

### 原因:thinking:
こちらの原因としては
https://hepokon365.hatenablog.com/entry/2019/10/31/022524
こちらの記事に同じようにエラーが起きていまして
どうやら古いgraceful-fsが使われているnpmパッケージがある可能性があったため

ターミナルにてgranceful-fsをnpm lsコマンドで確認

```terminal:terminal
hoge$ npm ls graceful-fs
setting2@1.0.0 ~~~~
├─┬ browser-sync@2.26.7
│ ├─┬ chokidar@2.1.8
│ │ └─┬ readdirp@2.2.1
│ │   └── graceful-fs@4.2.3 
│ ├─┬ fs-extra@3.0.1
│ │ ├── graceful-fs@4.2.3 
│ │ └─┬ jsonfile@3.0.1
│ │   └── graceful-fs@4.2.3 
│ └─┬ yargs@6.4.0
│   └─┬ read-pkg-up@1.0.1
│     └─┬ read-pkg@1.1.0
│       ├─┬ load-json-file@1.1.0
│       │ └── graceful-fs@4.2.3 
│       └─┬ path-type@1.1.0
│         └── graceful-fs@4.2.3 
├─┬ del@5.1.0
│ └── graceful-fs@4.2.3 
├─┬ gulp@3.9.1 invalid //⬅️こちらです
│ └─┬ vinyl-fs@0.3.14
│   ├─┬ glob-watcher@0.0.6
│   │ └─┬ gaze@0.5.2
│   │   └─┬ globule@0.1.0
│   │     └─┬ glob@3.1.21
│   │       └── graceful-fs@1.2.3  //⬅️こちらです
│   └── graceful-fs@3.0.12 
├─┬ gulp-cssmin@0.2.0
│ ├── graceful-fs@4.1.15 
│ └─┬ temp-write@0.1.1
│   └── graceful-fs@2.0.3 
├─┬ gulp-imagemin@7.1.0
│ ├─┬ imagemin@7.0.1
│ │ └── graceful-fs@4.2.3 
│ └─┬ imagemin-gifsicle@7.0.0
│   └─┬ gifsicle@5.0.0
│     └─┬ bin-build@3.0.0
│       └─┬ decompress@4.2.1
│         └── graceful-fs@4.2.3 
├─┬ gulp-pleeease@2.0.2
│ └─┬ pleeease@4.3.0
│   ├─┬ css-mqpacker@4.0.1
│   │ └─┬ fs-extra@0.26.7
│   │   ├── graceful-fs@4.2.3 
│   │   ├─┬ jsonfile@2.4.0
│   │   │ └── graceful-fs@4.2.3  deduped
│   │   └─┬ klaw@1.3.1
│   │     └── graceful-fs@4.2.3 
│   ├─┬ csswring@4.2.3
│   │ └─┬ fs-extra@0.30.0
│   │   ├── graceful-fs@4.2.3 
│   │   └─┬ jsonfile@2.4.0
│   │     └── graceful-fs@4.2.3  deduped
│   ├─┬ less@2.7.3
│   │ └── graceful-fs@4.2.3 
│   └─┬ node-sass@4.14.0
│     └─┬ node-gyp@3.8.0
│       ├─┬ fstream@1.0.12
│       │ └── graceful-fs@4.2.3 
│       └── graceful-fs@4.2.3 
├─┬ gulp-rev@9.0.0
│ └─┬ vinyl-file@3.0.0
│   └── graceful-fs@4.2.3 
├─┬ gulp-sourcemaps@2.6.5
│ └── graceful-fs@4.2.3 
├─┬ gulp-uncss@1.0.6
│ └─┬ uncss@0.14.1
│   └─┬ phridge@2.0.0
│     └─┬ phantomjs-prebuilt@2.1.16
│       └─┬ fs-extra@1.0.0
│         ├── graceful-fs@4.2.3 
│         └─┬ jsonfile@2.4.0
│           └── graceful-fs@4.2.3  deduped
├─┬ gulp-useref@4.0.1
│ └─┬ vinyl-fs@3.0.3
│   ├─┬ fs-mkdirp-stream@1.0.0
│   │ └── graceful-fs@4.2.3 
│   ├── graceful-fs@4.2.3 
│   └─┬ vinyl-sourcemap@1.1.0
│     └── graceful-fs@4.2.3 
├─┬ gulp-watch@5.0.1
│ └─┬ vinyl-file@2.0.0
│   └── graceful-fs@4.2.3 
├─┬ npm-check-updates@4.1.2
│ ├─┬ pacote@11.1.4
│ │ ├─┬ @npmcli/installed-package-contents@1.0.5
│ │ │ └─┬ readdir-scoped-modules@1.1.0
│ │ │   └── graceful-fs@4.2.3 
│ │ └─┬ cacache@15.0.0
│ │   └─┬ move-concurrently@1.0.1
│ │     └─┬ fs-write-stream-atomic@1.0.10
│ │       └── graceful-fs@4.2.3 
│ └─┬ update-notifier@4.1.0
│   └─┬ configstore@5.0.1
│     └── graceful-fs@4.2.3 
└─┬ spritesmith@3.4.0
  └─┬ pixelsmith@2.4.1
    └─┬ vinyl-file@1.3.0
      └── graceful-fs@4.2.3 

npm ERR! invalid: gulp@3.9.1
```

とでてきた
よくみるとgraceful-fs@1.2.3とバチクソ古いのも見つかったが
gulp@3.9.1となぜか3も残っていた


### 解決法:bulb:
原因までわかればあとは簡単です
いらないものを消すだけです。

```json:package.json
"dependencies": {
    "gulp": "^3.9.1"
 }
```
僕の場合はなぜか開発環境でしか使わないgulpがdependenciesにはいっていたため
こちらを削除
それ以外の方はgraceful-fs@~ を削除するとうまくいくと思います。
参考記事にも載っていますのでそちらを参考にしてみてください


```terminal:terminal
hoge $ gulp
[18:02:21] Requiring external module @babel/register
[18:02:23] Using gulpfile ~/hoge/hoge~~~/gulpfile.babel.js
[18:02:23] Starting 'default'...
[18:02:23] Starting 'compileStylus'...
[18:02:24] Finished 'compileStylus' after 1.46 s
[18:02:24] Finished 'default' after 1.47 s
hoge $
```
修正後gulpコマンドが綺麗に通ります

## おわりに
記事を探すとあまり見つからなかったのですが検索力が悪いせいか
まあQiitaで探す方多いと思うのでこちらで参考になればいいかなと
ここおかしくない？ってやつあればコメントください:rice:

### 参考記事
[npm-check-updatesについて](https://www.npmjs.com/package/npm-check-updates)

[Node.js v12にアップデートするとgulp v4でもfs.jsで「ReferenceError: primordials is not defined」エラーが発生](https://hepokon365.hatenablog.com/entry/2019/10/31/022524)