gulp v4.0.0がプレリリース! 移行方法と変更点まとめ

2018年1月1日に、gulp v4.0.0がプレリリースされました。この記事では、gulp v4への移行方法と、主な変更点をいくつか紹介します。

この記事の目次

gulp v4への移行方法

まず、gulp v3からv4への移行方法について説明します。

gulpのグローバルインストール

グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。


$ npm rm -g gulp
$ npm install -g gulp-cli

gulpのローカルインストール

ローカルインストールされているgulp v3を削除して、gulp v4をローカルインストールします。


$ npm uninstall --save-dev gulp
$ npm install --save-dev gulp@next

gulp v4の変更点

gulp v4の変更点のうち、以下の3点を紹介します。

  1. タスクの直列・並列処理
  2. gulp.taskの引数
  3. gulp.watchの引数

タスクの直列処理・並列処理が標準APIで実装可能

gulp v3では、タスクの直列・並列処理を実装するためにはrun-sequenceパッケージが必要でした。gulp v4では、新たに追加されたgulp.seriesgulp.parallelの2つのメソッドで実装できるようになりました。

  • gulp.series:タスクを直列処理する
  • gulp.parallel:タスクを並列処理する

gulp.taskの引数が変更

gulp v4での最も大きな仕様変更の一つに、gulp.taskの引数の変更があります。

  • v3での仕様:gulp.task(name [, deps] [, fn])
  • v4での仕様:gulp.task([name,] fn)

この仕様変更にともなって、gulpfile.jsを書き換える必要があります。例えば、gulpfile.jsに


gulp.task('default', ['task1', 'task2'], function(){
    // タスクの記述
});

という記述があった場合、gulp v4の環境で実行すると、下記のエラーが発生します。

AssertionError: Task function must be specified

gulp v4の環境でタスクを実行するためには、gulpfile.jsの記述を下記のように書き換える必要があります。


gulp.task('default', gulp.series( gulp.parallel('task1', 'task2'), function(){
    // タスクの記述
}));

gulp.watchの引数も変更

gulp.taskだけでなくgulp.watchの引数も、gulp v4で変更になります

  • v3での仕様:gulp.task(glob [, opts], tasks)
  • v4での仕様:gulp.task(glob [, opts] [, fn])

例えば、Sassファイルの変更を監視してコンパイルする場合、gulpfile.jsに下記のように記述していました。


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

gulp v4でタスクを実行する場合は、次のように書き換える必要があります。


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

参考URL