gulp4を使用する際に発生したTypeErrorが解消できない

Question

##現状

gulp4をインストール後、gulpコマンドを実行したら下記のエラーが発生しました。

[vagrant@local profile]$ gulp
[10:58:53] Using gulpfile /vagrant/sample.com/profile/gulpfile.js
/home/vagrant/.nvm/versions/node/v10.14.1/lib/node_modules/gulp/bin/gulp.js:129
    gulpInst.start.apply(gulpInst, toRun);
                   ^

TypeError: Cannot read property 'apply' of undefined
    at /home/vagrant/.nvm/versions/node/v10.14.1/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:744:11)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)
[vagrant@local profile]$ 

https://qiita.com/jshimazu/items/2c281bd2d480cce322e9
こちらの記事を参考にgulpのアップデートを図りましたが、npm install gulpjs/gulp-cli#4.0 -gこちらのコマンド実行時に下記のエラーが発生しました。

[vagrant@local profile]$ npm uninstall gulp -g
removed 254 packages in 1.612s
[vagrant@local profile]$ npm install gulpjs/gulp-cli#4.0 -g
npm ERR! code 1
npm ERR! Command failed: /usr/bin/git checkout 4.0
npm ERR! error: pathspec '4.0' did not match any file(s) known to git.
npm ERR! 

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2018-12-02T11_01_40_492Z-debug.log
[vagrant@local profile]$ 

##質問

このエラーはどのように解消すれば良いでしょうか？

足らない点ありましたら、都度情報を掲載致しますので、ご回答の程よろしくお願い致します。

Answer 1

以下のコマンドを実行して、Local versionとCLI versionが互いに対応しているかを確認してください。

gulp -v

もし、Local versionもしくはCLI versionのどちらかがもう一方に対応していない場合、どちらかのバージョンをより新しいバージョンの方に合わせる必要があります。

ここで、もしCLI versionをアップデートする場合、質問文にあるnpm install gulpjs/gulp-cli#4.0 -gを使います。しかし、このコマンドは現在正常に動作しません。なぜならば、現在のgulpのリポジトリには、#4.0というブランチがないからです。

現在は、いつも行うようにnpm-uninstall, npm-installコマンドを実行することで、古いgulp-cliを削除し、新しいgulp-cliをインストールすることができます。

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

---

追記
gulp4から、gulp.task()の引数が変更されています。以下のようにすることで、質問者さんのエラーは解消すると思います。

const gulp = require('gulp');
const sass = require('gulp-sass');
const $ = require('gulp-load-plugins');

gulp.task('sass', function () {
    return gulp.src('webroot/sass/*.sass')
        .pipe(sass({
            outputStyle: 'compressed'
        }).on('error', sass.logError))
        .pipe(gulp.dest('webroot/css'));
});

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

gulp.task('default', gulp.series('sass'));

Comments

[Tatsuo_Iriyama]

[vagrant@local profile]$ gulp -v
[15:49:55] CLI version 2.0.1
[15:49:55] Local version 4.0.0
[vagrant@local profile]$

gulpのバージョンが現状このような形になってまして、上記コマンドを実行してみたんですが、gulpのバージョンがなぜか変わらず困惑しております。

質問当初のコマンドで入らない理由はわかったので、改めて手順を一つずつ教えて頂くことは可能でしょうか？
コマンドベースで一つずつをイメージしております。

ご返信遅れまして申し訳ありません。

[s8_chu]

`CLI version`の`gulp-cli`を正常にアンインストールできていない可能性があります。
`npm r -g gulp-cli`を実行した後、`npm ls -g`を実行し、`gulp-cli`がアンインストールできたことが確認できますか？

[Tatsuo_Iriyama]

まず、[ npm r -g gulp-cli ]を実行しましたら
[vagrant@local profile]$ npm r -g gulp-cli
up to date in 0.039s
[vagrant@local profile]$
このような結果になりました。

次に[ npm ls -g ]をしましたら、ツリー構造が表示され、最後に
│ │
│ New minor version of npm available! 6.4.1 → 6.5.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.5.0 │
│ Run npm install -g npm to update! │
│ │
このような結果になりました。

初学者なため、gulp-cliがアンインストールされているか、をどこで確認できるかがわかっていない為、お答えできません。大変申し訳ありません。

[s8_chu]

> 次に[ npm ls -g ]をしましたら、ツリー構造が表示され、最後に
最後に表示されるその文章は、新しいバージョンの npm が使用できることを通知しているだけで、 gulp-cli の有無には関係がありません。表示されたツリーの中に gulp-cli があるかどうかでアンインストールされているかどうかがわかります。

以下のコマンドを実行したとき、 gulp-cli が表示されますか？
npm ls -g gulp-cli --depth=0

[Tatsuo_Iriyama]

[vagrant@local profile]$ npm ls -g gulp-cli --depth=0
/home/vagrant/.nvm/versions/node/v10.14.1/lib
└── (empty)

[vagrant@local profile]$

この様な結果が返ってきましたので、削除されているかと思います！

[s8_chu]

なるほど...。

`CLI version 2.0.1`, `Local version 4.0.0`の状態で gulp コマンドが成功するかを、回答文のコマンドを使いもう一度 gulp-cli をインストールして、確認してみていただけませんか？

[Tatsuo_Iriyama]

上記コマンドを実行しまして、
[vagrant@local profile]$ gulp -v
[14:06:12] CLI version 2.0.1
[14:06:12] Local version 4.0.0
[vagrant@local profile]$

このような状態からgulpコマンドを叩きましたら

[vagrant@local profile]$ gulp
internal/modules/cjs/loader.js:582
throw err;
^

Error: Cannot find module 'gulp-load-plugins'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
at Function.Module._load (internal/modules/cjs/loader.js:506:25)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.<anonymous> (/vagrant/sample.com/profile/gulpfile.js:3:9)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
[vagrant@local profile]$

このようなエラーになりました。
現状がこのような形になります。

[s8_chu]

`npm i gulp-load-plugins`を実行して、再度 gulp コマンドを実行してみてください。

[Tatsuo_Iriyama]

上記コマンドとgulpコマンドを実行した結果になります。

[vagrant@local profile]$ npm i gulp-load-plugins
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: minimist@1.2.0 (node_modules/fsevents/node_modules/rc/node_modules/minimist):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, open '/vagrant/sample.com/profile/node_modules/fsevents/node_modules/rc/node_modules/minimist/package.json.1690860392'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ gulp-load-plugins@1.5.0
updated 1 package and audited 7071 packages in 12.39s
found 0 vulnerabilities

[vagrant@local profile]$
[vagrant@local profile]$
[vagrant@local profile]$ gulp
assert.js:350
throw err;
^

AssertionError [ERR_ASSERTION]: Task function must be specified
at Gulp.set [as _setTask] (/vagrant/sample.com/profile/node_modules/undertaker/lib/set-task.js:10:3)
at Gulp.task (/vagrant/sample.com/profile/node_modules/undertaker/lib/task.js:13:8)
at Object.<anonymous> (/vagrant/sample.com/profile/gulpfile.js:58:6)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
[vagrant@local profile]$

解消される事なくエラーになりました。

[Tatsuo_Iriyama]

長々とお付き合いありがとうございます。。。

[s8_chu]

`gulpfile.js`には何か書いていますか？もし何かを記述していれば、それが原因でエラーが発生している可能性があるので、質問文に`gulpfile.js`の内容を追記していただけませんか？

[Tatsuo_Iriyama]

var gulp = require('gulp');
var sass = require('gulp-sass');
var $ = require('gulp-load-plugins')();

gulp.task('sass', function () {
gulp.src('webroot/sass/*.sass')
.pipe(sass({
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest('webroot/css'));
});

gulp.task('watch', function() {

// watch sass
gulp.watch('webroot/sass/*.sass', ['sass']);

});

gulp.task('default', ['sass']);

[Tatsuo_Iriyama]

このような形になっております

[s8_chu]

`gulpfile.js`の内容を回答文に追記したコードに変更して、 gulp コマンドを実行してみてください。

[Tatsuo_Iriyama]

解決しました！！！！！

本当に長々とありがとうございます。。。
非常に助かりました。。。

ありがとうございました！！！