コーディング時に欠かせないGulpですが、かなり前にメジャーアップデートが行われたのですが、案件に追われてなかなかアップデートできずにいました、、今更ではありますが、バージョン4系にアップデートしましたので、その時の流れといろんな注意点をメモしておきたいと思います。  

Gulp v3系からGulp v4系へアップデート

Gulpですがグローバルへのインストールとローカルでプロジェクト単位でのインストールがありますが、基本的にローカルのインストールだけでOKです。すでにPC内にはGulp v3系が入っている状態ですが、一応、使う可能性があれば残しておいてもいいのではないでしょうか。   今回は新たにGulp v4系をインストールするので、Gulp v3系とは別のプロジェクトフォルダを用意します。まずはpackage.jsonの作成を行います。コマンドでプロジェクトフォルダまで移動して、下記のコマンドで作成します。

$ cd プロジェクトディレクトリ
$ npm init -y

  続けて、ローカルへGulpをインストールしていきます。通常のインストール方法であればもう4系が自動的にインストールされるようですね。

$ npm install --save-dev gulp

+ gulp@4.0.0
added 386 packages from 239 contributors in 11.559s
[+] no known vulnerabilities found [6376 packages audited]

  万が一、3系がインストールされる場合は下記のコマンドでインストールを試してみてはいかがでしょうか。

// v.3.9がインストールされる場合
$ npm install --save-dev gulp@next

  インストールが完了し、バージョンが4系になっているのが確認できますね。この時のコマンドですが最初に「npx」と付けることでローカルのnode_modulesを参照するようになるので、グローバルにインストールしていなくてもgulpのコマンドが実行できるようになります。

$ npx gulp -v
[00:00:00] Local version 4.0.0

  これで無事に3系から4系へのGulpのアップデートが完了しました。基本的な使い方はほとんど同じでこれまで通り使えるようになっているのですが、一部アップデートに伴い変更点があるようで、3系で使っていたgulpfile.jsをそのまま使うとエラーが出てしまいます。エラーごとの対処法と合わせて、4系での変更点を見ていきます。  

Gulp v4系でのエラーメッセージと対処法

まず、タスクを実行すると下記のようなエラーメッセージが返ってくることがあります。これはタスクの処理が終わっていないことを示すもので、4系からはタスクへの関数にいくつかの制約ができたみたいです。

[00:00:00] The following tasks did not complete: TASK_NAME
[00:00:00] Did you forget to signal async completion?

  この対処法としては下記のようにreturnを追加することで対応するほか、引数からコールバックを実行することでも対処できるようです。

gulp.task('sass', function () {
  return gulp.src('src/scss/**/*.scss') // returnを追加する
  .pipe(sass())
  .pipe(gulp.dest('./dist/assets/css'))
});

gulp.task('html', function (done) {
  browser.reload();
  done(); // コールバック関数を追加する
});

  また、上記以外にも下記のようなエラーメッセージが出ることもあります。特に監視系のタスクを実行した時に見かけるのではないでしょうか。

AssertionError [ERR_ASSERTION]: Task function must be specified

  ここでも、v3系とv4系の書き方が変更されたことによる影響が出ています。具体的には、gulp.task()関数の引数が変わったことです。コードを下記のように変更することで対応できます。並列で複数タスクを処理する場合には少し異なりますので注意が必要です。

// Gulp v3系の記述
gulp.task('task_1', ['task_2'], function() {
});

// Gulp v4系の記述
gulp.task('task_1', gulp.series( 'task_2', function() {
});

// Gulp v4系で複数のタスクを並列で処理させる場合
gulp.task('task_1', gulp.series( gulp.parallel( 'task_2', 'task_3' ), function() {
}));

  また、gulp.watch()関数も若干書き方が変更されており、これまではタスク名を引数に入れていましたが、gulp.task()関数で直接タスクを呼び出す必要があります。

// Gulp v3系の記述
gulp.watch('src/scss/**/*.scss', ['sass']);

// Gulp v4系の記述
gulp.watch('src/scss/**/*.scss', gulp.task('sass'));

  また、Gulpの4系では「gulp.task()」が非推奨となっています。それに伴いタスクの登録は関数として定義した上で、exportsで実行するという形になります。

const taskSass = () => 
 src('src/scss/**/*.scss') 
  .pipe(sass())
  .pipe(gulp.dest('./dist/assets/css'))

exports.sass = taskSass

  これで、下記のコマンドを実行すると登録したタスクが走るようになります。

$ npx gulp sass

  これまでと若干の変更が加えられているので、タスク実行時にエラーが出る場合が多くなってしまうのですが、一つずつ確認すれば、そこまで注意しておく場所も少ないかと思います。これで気にすることなく4系へ移行ができますね。   （参考にさせて頂いたサイト） gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ リリース間近？？より便利になったgulp 4.0の変更点と移行へのポイントを紹介します！