【超まとめ】今まで遭遇したgulpやSassエラーと対処法を片っ端からまとめてみた

サムネイル環境構築
2019.10.19
スポンサーリンク

gulpを触る度にエラーが出るみなさん、こんにちは。

今回は過去に自分が遭遇してきたgulpのエラーを片っ端からまとめました。

エラーが出る度に内容と解決法をメモっておいたので、僕と同じエラーが出る人は今回紹介する方法で解決できるかもです。

ただ原因がイマイチよくわかってない部分もあるので、そこは大目にみてくださいm(__)m

では一気にどうぞ。

 

補足：npm i -D について

i：install と同じ。

-D：–save-devと同じ（ローカルインストール）。

短いコマンドを使うと時短になるので、ぜひ覚えておくといいと思います。

これから紹介するコードの先頭についている「$」は入力する必要はありません（ターミナルを開くとコマンドを入力する前に文頭に最初からついてます）

 

記事が長いので目次から目的の場所に飛ぶことをオススメします。

 

スポンサーリンク

1：code EACCES/errno -13

$ npm i -D gulp-sass 
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/username/.npm/_cacache/index-v5/f5/6a
npm ERR! errno -13
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/username/.npm"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2019-10-17T16_10_45_904Z-debug.log

詳しくはわからないですが、原因は権限（パーミッション）とかその辺の問題です。

 

対処法は、最初にsudoをつけてからコマンドを入力するようにします。

enterを押すとパスワードの入力を求められるので入力しましょう（画面上には何も表示されませんがきちんと入力されています）

$ sudo npm i -D gulp-sass

 

sudo

→Linuxコマンド。root権限でコマンドを動かせる（superuser do）。「permission denied」という文言を見たらとりあえず「sudo コマンド」を試してみる。

パッケージのインストールでこんな感じのエラーが出たら、基本的にsudoをつけてもう一度実行してみてください。大体はこれで解決できると思います。

 

2：configure error/errno 1

gyp ERR! configure error 
gyp ERR! stack Error: EACCES: permission denied, mkdir '/Users/username/Desktop/new_sample_node/node_modules/node-sass/build'
gyp ERR! System Darwin 18.5.0
gyp ERR! command "/Users/username/.nodebrew/node/v12.6.0/bin/node" "/Users/username/Desktop/new_sample_node/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/username/Desktop/new_sample_node/node_modules/node-sass
gyp ERR! node -v v12.6.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm WARN new_sample_node@1.0.0 No description
npm WARN new_sample_node@1.0.0 No repository field.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@4.12.0 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the node-sass@4.12.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2019-10-17T16_22_26_981Z-debug.log

 

原因はよくわかりませんが、調べたところ以下のコマンドを順に入力すると解決します。自分でも試した結果、ちゃんと解決できました。

$ sudo npm config set user 0
$ sudo npm config set unsafe-perm true

 

3：Error: Cannot find module / code: ‘MODULE_NOT_FOUND’,

Error: Cannot find module 'gulp-concat'
Require stack:
- /Users/username/Desktop/new_sample_node/gulpfile.js
- /Users/username/.nodebrew/node/v12.6.0/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js
- /Users/username/.nodebrew/node/v12.6.0/lib/node_modules/gulp/node_modules/gulp-cli/index.js
- /Users/username/.nodebrew/node/v12.6.0/lib/node_modules/gulp/bin/gulp.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:625:15)
    at Function.Module._load (internal/modules/cjs/loader.js:527:27)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object. (/Users/username/Desktop/new_sample_node/gulpfile.js:6:13)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/username/Desktop/new_sample_node/gulpfile.js',
    '/Users/username/.nodebrew/node/v12.6.0/lib/node_modules/gulp/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js',
    '/Users/username/.nodebrew/node/v12.6.0/lib/node_modules/gulp/node_modules/gulp-cli/index.js',
    '/Users/username/.nodebrew/node/v12.6.0/lib/node_modules/gulp/bin/gulp.js'
  ]
}

原因はgulpfile.jsで呼び出されているモジュールがnode_modulesに入っていないことです。ネットから拾ってきたコードをよくわからないままgulpfile.jsをコピペしてるとこうなりがちです。

 

対処法はgulpfile.jsを見ながら、入っていなさそうなパッケージを1つずつインストールすることです。

最初の方にあるrequireで読み込まれているのがパッケージなので、片っ端からnpm i -Dでインストールしてみましょう。半角スペースで区切れば同時に複数インストールもできます。

インストールしたパッケージはpackage.jsonに自動で追記されます。

当然っちゃ当然ですが、存在しないパッケージは呼び出せるはずがないですからね。

 

4：Error: watching ./sass/**/*.scss: watch task has to be a function

[02:37:31] 'watch' errored after 2.01 ms
[02:37:31] Error: watching ./sass/**/*.scss: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)
    at Gulp.watch (/Users/username/Desktop/new_sample_node/node_modules/gulp/index.js:31:11)
    at /Users/username/Desktop/new_sample_node/gulpfile.js:27:10
    at taskWrapper (/Users/username/Desktop/new_sample_node/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:415:14)
    at runBound (domain.js:428:12)
    at asyncRunner (/Users/username/Desktop/new_sample_node/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

Sassなどのwatchに関するエラーですね。

原因はgulpfile.jsの書き方がgulpv3とv4で違うことです。gulpのバージョンに合わせた書き方をしないとエラーが出ます。

 

対処法はまずgulpのバージョンを確認してから、それに合わせた書き方にgulpfile.jsを変更することです。

gulpのバージョン確認は以下のコマンド。

$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

 

Local versionが4.xと出た人は以下のような書き方になります。

gulp.task('watch', function() {
  gulp.watch('./sass/**/*.scss', gulp.task('sass'));
});

 

3.xと出た人は以下のような書き方になります。

gulp.task('watch', function(){
  gulp.watch('./sass/**/*.scss', ['sass']);
});

書き方が若干違うのがわかると思います。これがエラーの原因です。

watch対象のディレクトリは各自書き換えてください。ちなみに上のコードだとgulpfile.jsと同じ階層にあるsassフォルダ内の全ての.scssファイルがwatchの対象になります。

 

watchに関するエラーはこちらの記事で詳しくまとめたので参考にどうぞ。

gulpでSassが自動コンパイル（watch）できないときの対処法
gulpをインストールしてSassをwatchで自動コンパイルしようとしていたのですが、エラーが出てうまくできない、調べても解決法がなかなか...
dezanari.com

 

5：The following tasks did not complete: sass

[03:24:08] The following tasks did not complete: sass
[03:24:08] Did you forget to signal async completion?

これもSassなどのwatchで出がちですね。

原因はこれまたgulpfile.jsの書き方がv3とv4で違うことです。おそらくgulpはv4なのにgulpfile.jsはv3の書き方で書かれているみたいな感じです。

 

対処法はgulpのタスクの最初にreturnをつけましょう。2行目の先頭ですね。

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe( sassGlob() )
    .pipe( plumber({ errorHandler: notify.onError( 'Error: <%= error.message %>' ) }) )
    .pipe(sass().on('error', sass.logError))
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe( postcss([ autoprefixer() ]) )
    .pipe( postcss([ cssdeclsort({ order: 'alphabetically' }) ]) )
    .pipe(postcss([mqpacker()]))
    .pipe(gulp.dest('./css'));
});

 

gulp v3以下ではreturnはいらなかったのですが、v4になって明示的にタスクを終了させる必要が出たのでreturnが必要になったという感じです。

v4ではタスクごとにreturnを記述するのを忘れないようにしましょう。

 

6：Error: File to import not found or unreadable: foundation/**.

[14:44:00] gulp-notify: [Error running Gulp] Error: sass/style.scss
Error: File to import not found or unreadable: foundation/**.
        on line 4 of sass/style.scss
>> @import "foundation/**";

   ^

[14:44:00] Finished 'sass' after 73 ms

これもSassのwatchのエラーですね。

原因はgulpfile.jsに書かれている「gulp-plumber」と「gulp-sass-glob」の順番が逆になっていることです。

 

対処法は「gulp-sass-glob」→「gulp-plumber」の順でgulpfile.jsに記述することです。この順番じゃないとエラーが出ます。

globは「**」という書き方でのインポートをできるようにするパッケージですが、通常では「**」という書き方は許可されていないのでこれをplumberがエラーと認識してしまいます。

globを先に読み込まないとplumberがエラーと判定するので気をつけましょう。

 

7：fs.js:27 const { Math, Object } = primordials;

fs.js:27
const { Math, Object } = primordials;
                         ^

ReferenceError: primordials is not defined
    at fs.js:27:26
    at req_ (/Users/username/Desktop/new_sample_node/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/username/Desktop/new_sample_node/node_modules/natives/index.js:55:10)
    at Object. (/Users/username/Desktop/new_sample_node/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:643:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:683:19)
    at require (internal/modules/cjs/helpers.js:16:16)

（これ調べてもなかなか出てこなかったのでメンタル終わるかと思いました…）

原因はnode v12.xとgulp v3.xをセットで使っていることです。

詳しくはわかりませんが、バージョンの組み合わせ的にnode v12系とgulp v3系は機能しないみたいです。

 

対処法はnodeのバージョンを下げるか、gulpのバージョンを4.xに上げましょう。

ただし、gulpはv3とv4でgulpfile.jsの書き方が変わるので、複数人で同じ環境で作業している人とかはnodeのバージョンを下げるのがおすすめです。

逆に自分で一から環境構築している人はgulpのバージョンを上げてv4の書き方に慣れておくといいと思います。

 

nodeのバージョンを変更するにはnodebrewなどのバージョン管理ツールを使う必要があります。インストールはそこまで難しくないはずなので、各自ググってください。

 

gulpのバージョンを4.xに上げたい人は以下のコマンドを実行しましょう。gulpの最新版が自動でインストールされます。

$ npm i - D gulp

インストールできたらバージョンを確認してみます。Local versionが4.xと出たら成功です。

$ gulp -v
CLI version 3.9.1
Local version 4.0.2

 

8：TypeError: gulp.hasTask is not a function

TypeError: gulp.hasTask is not a function
    at /Users/username/Desktop/new_sample_node/node_modules/run-sequence/index.js:23:22
    at Array.forEach ()
    at verifyTaskSets (/Users/username/Desktop/new_sample_node/node_modules/run-sequence/index.js:17:11)
    at runSequence (/Users/username/Desktop/new_sample_node/node_modules/run-sequence/index.js:130:2)
    at /Users/username/Desktop/new_sample_node/gulpfile.js:159:3
    at taskWrapper (/Users/username/Desktop/new_sample_node/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:415:14)
    at runBound (domain.js:428:12)
    at asyncRunner (/Users/username/Desktop/new_sample_node/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

原因はgulpのバージョンがv4なのにgulpfile.jsでrunSequenceを使っていることです。v3で使えたrunSequenceはv4ではサポートされていないんですね。

 

対処法はgulpのバージョンをv3に下げることです。

念の為現在のバージョンを確認しておきましょう。

$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2

 

そうしたら適当な3.x系のgulpをインストールしましょう。バージョンは以下のページの右側（66versionsのところ）から確認できます。

＞＞https://www.npmjs.com/package/gulp

今回はなんとなくv3.5.1をインストールしてみます。npm i -D gulp@任意のバージョンでインストールできます。

$ npm i -D gulp@3.5.1
+ gulp@3.5.1
added 45 packages from 21 contributors, removed 94 packages, updated 12 packages and audited 7482 packages in 9.837s
found 36 vulnerabilities (10 low, 7 moderate, 18 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

 

これでインストールできましたが、コマンドラインにrun `npm audit fix` to fix themと出た人はこれも実行しましょう。

$ npm audit fix

 

これでokですね。gulp -vで確認してみましょう。

$ gulp -v
CLI version: 2.2.0
Local version: 3.5.1

完璧です。

事情があってgulpのバージョンを変更できない人は、頑張ってgulpfile.jsをv4の書き方に書き換えるしかないかもです…

 

9：TypeError: gulp.series is not a function

gulp.series(
       ^

TypeError: gulp.series is not a function
    at Object. (/Users/username/Desktop/new_sample_node/gulpfile.js:149:8)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Liftoff.handleArguments (/Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/bin/gulp.js:116:3)
    at Liftoff.execute (/Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/node_modules/liftoff/index.js:203:12)
    at module.exports (/Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/node_modules/flagged-respawn/index.js:51:3)
    at Liftoff. (/Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/node_modules/liftoff/index.js:195:5)
    at /Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/node_modules/liftoff/index.js:165:9
    at /Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/node_modules/v8flags/index.js:110:14
    at /Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/node_modules/v8flags/index.js:38:12
    at /Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/node_modules/v8flags/index.js:49:7

原因はgulpのバージョンがv3なのにgulpfile.jsでgulp.seriesやgulp.parallelを使っていることです。v4で使えるgulp.seriesやgulp.parallelは、逆にv3では使えません。

 

対処法はgulpをv4に上げることです。

念の為現在のバージョンを確認しておきましょう。

$ gulp -v
CLI version 3.9.1
Local version 3.9.1

 

そうしたら最新版（v4）のgulpをインストールします。普通にインストールすれば勝手に最新版がインストールされます。

$ npm i -D gulp

 

できたらもう一度バージョンを確認してみます。

$ gulp -v
CLI version 3.9.1
Local version 4.0.2

gulpのバージョンがv4になりました。これでgulp.seriesやgulp.parallelが使えるようになります。
事情があってgulpのバージョンを変更できない人は、頑張ってgulpfile.jsをv3の書き方に書き換えるしかないかもです…

 

10：TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string…

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type object
    at Function.from (buffer.js:219:9)
    at new Buffer (buffer.js:179:17)
    at Transform.transform [as _transform] (/Users/username/Desktop/new_sample_node/node_modules/gulp-combine-media-queries/index.js:152:21)
    at Transform._read (/Users/username/Desktop/new_sample_node/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at Transform._write (/Users/username/Desktop/new_sample_node/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (/Users/username/Desktop/new_sample_node/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (/Users/username/Desktop/new_sample_node/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at Transform.Writable.write (/Users/username/Desktop/new_sample_node/node_modules/gulp-combine-media-queries/node_modules/readable-stream/lib/_stream_writable.js:194:11)
    at DestroyableTransform.ondata (/Users/username/Desktop/new_sample_node/node_modules/readable-stream/lib/_stream_readable.js:619:20)
    at DestroyableTransform.emit (events.js:203:13)
    at DestroyableTransform.EventEmitter.emit (domain.js:494:23)
    at addChunk (/Users/username/Desktop/new_sample_node/node_modules/readable-stream/lib/_stream_readable.js:291:12)
    at readableAddChunk (/Users/username/Desktop/new_sample_node/node_modules/readable-stream/lib/_stream_readable.js:278:11)
    at DestroyableTransform.Readable.push (/Users/username/Desktop/new_sample_node/node_modules/readable-stream/lib/_stream_readable.js:245:10)
    at DestroyableTransform.Transform.push (/Users/username/Desktop/new_sample_node/node_modules/readable-stream/lib/_stream_transform.js:148:32)
    at DestroyableTransform.sourceMapWrite [as _transform] (/Users/username/Desktop/new_sample_node/node_modules/gulp-sourcemaps/src/write/index.js:45:12)

（これ日本語・英語で調べても全く情報が出てこなくて死ぬかと思いました）

cmq（gulp-combine-media-queries）を使っていませんか？

どういう理由でエラーになるかはわかりませんが、こいつが原因であることは間違いないです。

 

対処法はnode_modulues/gulp-combine-media-queries/index.jsの152行目をコメントアウトします。

//中略

    file.contents = new Buffer(cssJson);  //←ここをコメントアウト

//中略

これでもう一度タスクを起動すると今度は動くはずです。

 

11：code EJSONPARSE/JSON.parse Failed to parse json

npm ERR! code EJSONPARSE
npm ERR! file /Users/username/Desktop/new_sample_node/package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token } in JSON at position 513 while parsing near '...-glob": "^1.1.0",
npm ERR! JSON.parse   }
npm ERR! JSON.parse }
npm ERR! JSON.parse '
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2019-10-19T05_35_03_904Z-debug.log

原因はpackage.jsonの最後の行に「,」がついてしまっていることです。

 

  "devDependencies": {
    "autoprefixer": "^9.6.1",
    "css-declaration-sorter": "^4.0.1",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sass-glob": "^1.1.0",  //←コイツ
  }

対処法は言うまでもなく末尾の「,」を消すことです。

こういう細かい部分のエラーでハマると死ぬほど腹たちますよね。deleteを思いっきり叩いて消し炭にしてやりましょう。

 

12：Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x

/Users/username/Desktop/new_sample_node/node_modules/node-sass/lib/binding.js:15
      throw new Error(errors.missingBinary());
      ^

Error: Missing binding /Users/username/Desktop/new_sample_node/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Node Sass could not find a binding for your current environment: OS X 64-bit with Node.js 10.x

Found bindings for the following environments:
  - OS X 64-bit with Node.js 12.x

This usually happens because your environment has changed since running `npm install`.
Run `npm rebuild node-sass` to download the binding for your current environment.
    at module.exports (/Users/username/Desktop/new_sample_node/node_modules/node-sass/lib/binding.js:15:13)
    at Object. (/Users/username/Desktop/new_sample_node/node_modules/node-sass/lib/index.js:14:35)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object. (/Users/username/Desktop/new_sample_node/node_modules/gulp-sass/index.js:162:21)

原因はよくわかりませんが、エラーを見た感じnpm iで環境が変わったからみたいな感じですかね（This usually happens because your environment has changed since running `npm install`.のところ）

 

対処法はRun `npm rebuild node-sass`と書いてあるので、これをコピペしてそのまま実行しましょう。

$ npm rebuild node-sass

 

エラー画面に対処法が出ていることも多いので、まずは画面を読んで指示通りにコマンドを入れてみることが結構重要だったりします。

 

13：gulpInst.start.apply(gulpInst, toRun);

/Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                   ^

TypeError: Cannot read property 'apply' of undefined
    at /Users/username/.nodebrew/node/v10.16.3/lib/node_modules/gulp/bin/gulp.js:129:20
    at process._tickCallback (internal/process/next_tick.js:61:11)
    at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

（この記事を書いているときにたまたま出たエラーです。あまり参考にならないと思いますが…）

原因はよくわかりませんが、調べた限りだとgulp-cliらしいです。

 

対処法は古いgulp-cliをアンインストールして、新しいgulp-cliをインストールすることです。

まずはgulpのバージョンを確認。

$ gulp -v
[18:51:23] CLI version 3.9.1
[18:51:23] Local version 4.0.2

 

そうしたら古いgulp-cliは削除して、新しいgulp-cliをインストールします。

npm r -g gulp-cli
npm i -g gulp-cli

これで解決できる…らしい。

参考＞＞https://teratail.com/questions/161599

 

ただ、僕はちょっと違う方法で解決できたのでそれも紹介しておきます（多分あまり参考にならない）

まずは僕が作業していた時のgulpとnodeのバージョンです。

$ gulp -v
CLI version 3.9.1
Local version 4.0.2
$ node -v
v10.16.3

 

僕の場合はnodeのバージョンを12.xまで上げたら解決できました（nodeのバージョン管理にはnodebrewを使っています。別途インストール必要）

$ nodebrew ls
v8.11.1
v10.16.3
v12.6.0

current: v10.16.3
$ nodebrew use v12.6.0
use v12.6.0

node v10.16.3では上のエラーが出ましたが、v12.6.0にしたらエラーが出なくなりました。

上のエラーの原因はgulpとnodeのバージョンがうまく噛み合ってないことだと思うので、ここをなんとかすればいけるはずです（どうすればいいかはよくわかりませんm(__)m）

 

おまけ：gulpfile.jsでエラーが出た時の応急処置

gulpfile.jsでエラーが出る原因は、大体gulpのバージョンとgulpfile.jsの書き方が一致していないか、実行するタスクの書き方におかしい部分があるからだと思うので、「おかしそうな部分をコメントアウトする」という応急処置を紹介しておきます。

使える機能は制限されますが、エラーが出て何もできないよりはマシです。

 

gulpfile.jsのエラーでどうしようもない場合は、一部コメントアウトすることでエラーを回避するという方法も検討してみてください。

 

まとめ

エラーが出たらまずは画面を読んで、わからなかったらググってとりあえず出てきたのを色々試してみてください。

「変なコマンド入れてパソコンおかしくなったりしないかな…」と不安になる気持ちはめちゃめちゃわかります（僕もそうでした）

でも所詮npmの範囲内でコマンドを実行しているだけなのでパソコン自体がおかしくなることはまずないと思います。

 

まずは簡単そうなコマンドから試してみて、どうしようもなくなってきたら出てきたコマンドを片っ端から入れてみるといいと思います。

色々使ってみたり、エラーが出るたびに調べて解決していくと少しずつどこがどのように動いているのかがわかってくるので、まずは色々試してみることが重要ですね。

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！

読んでみる
スポンサーリンク
環境構築
スポンサーリンク
シェアする
wagashi
でざなり
スポンサーリンク