Gulp3からGulp4へ
今回Gulp3からGulp4へ(何回書くねん
)移行したのですがその際に出たエラーについて共有
アップデートはnpm-check-updatesというツールを使いnpmライブラリを総括アップデートを行いました。
エラー内容
アップデート後gulpコマンドが叩けるかを確認するために
index.js
import gulp from 'gulp'
import { compileStylus } from './tasks/stylus'
exports.default = gulp.series(
compileStylus
)
//↑gulpと叩くとcompileStylusというタスクを実行するよ〜という処理
./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
hogehoge $ gulp
//index.jsの中身を実行する。
と叩くと
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_ ~~~~~
とよくわからないエラーが出てきました。
原因
こちらの原因としては
https://hepokon365.hatenablog.com/entry/2019/10/31/022524
こちらの記事に同じようにエラーが起きていまして
どうやら古いgraceful-fsが使われているnpmパッケージがある可能性があったため
ターミナルにてgranceful-fsをnpm lsコマンドで確認
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も残っていた
解決法
原因までわかればあとは簡単です
いらないものを消すだけです。
package.json
"dependencies": {
"gulp": "^3.9.1"
}
僕の場合はなぜか開発環境でしか使わないgulpがdependenciesにはいっていたため
こちらを削除
それ以外の方はgraceful-fs@~ を削除するとうまくいくと思います。
参考記事にも載っていますのでそちらを参考にしてみてください
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で探す方多いと思うのでこちらで参考になればいいかなと
ここおかしくない？ってやつあればコメントください
参考記事
Node.js v12にアップデートするとgulp v4でもfs.jsで「ReferenceError: primordials is not defined」エラーが発生