Gulp v4でCannot read property ‘apply’ of undefinedとエラーが出る時の対応方法

Gulp v4を触ってみた際、TypeError: Cannot read property ‘apply’ of undefinedとエラーが出たので対応方法をメモ。

環境の用意

プロジェクトディレクトリを作成して移動します。

cd プロジェクトディレクトリ

package.jsonを作成します。

npm init

Gulpと動作テスト用にSassをインストールします。

npm install gulp gulp-sass --save-dev

Gulpのバージョンを確認すると、ローカルにv4.0.2がインストールされていることが確認できました。

gulp -v
=> CLI version 3.9.1
=> Local version 4.0.2

プロジェクトルートにgulpfile.jsを用意します。

gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('./style.scss')
  .pipe(sass({
    outputStyle : 'expanded'
  }))
  .pipe(gulp.dest('./'));
});

プロジェクトルートのstyle.scssをコンパイルするように設定しました。
style.scssを作成します。

style.scss

.test {
  font-size: 20px;

  &--aaa {
    color: red;
  }
}

実際にSassのコンパイルを実行してみます。

gulp sass

コンパイルはうまくいかず、以下のようなエラーが出ました。

TypeError: Cannot read property 'apply' of undefined

対応方法

調べてみると、グローバルのバージョンが影響してエラーが発生しているようでした。
公式のクイックスタートを見ると、過去にGulpをグローバルにインストールしている場合、削除後再インストールをする必要があるようです。

グローバルのGulpを削除します。

npm rm --global gulp

グローバルにGulpを再インストールします。

npm install --global gulp-cli

Gulpのバージョンを確認すると、グローバルのバージョンが変更されていることが確認できました。

gulp -v
=> CLI version: 2.2.0
=> Local version: 4.0.2

この状態で再度Sassのコンパイルを試してみます。

gulp sass

エラーが発生しないでコンパイルすることができました。

style.css

.test {
  font-size: 20px;
}

.test--aaa {
  color: red;
}

Gulpをローカルにインストールするとデフォルトでv4がインストールされますが、3.9.1を使いたい場合は「gulp@X.X.X」のように@の後にバージョンを記述することでバージョンを指定してインストールできます。

npm install gulp@3.9.1 --save-dev

【参考サイト】

• TypeError: Cannot read property ‘apply’ of undefined · Issue #192 · gulpjs/gulp-cli · GitHub
• Quick Start · gulp.js