gulp.seriesとgulp.parallelの違い

2021年8月3日GULP

gulp.seriesとgulp.parallelの違いについて紹介します。

gulp.seriesとgulp.parallelの違い

gulp.seriesは、指定したものを順番に実行してほしいときに使います。
gulp.parallelは同時に実行したいときに使います。

// seriesは順番に実行
gulp.series(['sass', 'javascript', 'imagemin', 'kit'])
// 同時でOKな場合parallel
gulp.parallel(['sass', 'javascript', 'imagemin', 'kit'])

どちらでもOkです。

gulp.seriesを使う場合

// Gulp default command
// watchコマンドをデフォルトにする
gulp.task('default', gulp.series('watch'));

gulpのデフォルトを設定するとき、変更検知のtaskだけを指定すればOKです。

gulp.parallelを使う場合

// Serve
gulp.task('serve', gulp.parallel(['sass', 'javascript', 'imagemin', 'kit']));

// Gulp default command
// watchコマンドをデフォルトにする
gulp.task('default', gulp.series(['serve', 'watch']));

parallelの場合、変更を検知するのをparallelのタスクが実行された後にしたいので、別途タスクを設ける必要があります。
それを両方実行するように、seriesを使って実行すればOKです。