Gulp - v4 の series と parallel を使って直列・並列処理を制御する
Gulp v4 で導入された series と parallel を使ってみました。
動作環境
$ node -v v8.12.0 $ npm -v 6.4.1 $ ./node_modules/.bin/gulp -v CLI version 2.0.1 Local version 4.0.0
series の使い方
series は直列(同期的とも言える)に処理を順次実行します。今回は、js ファイルのコンパイル等を行う scripts
タスクと sass ファイルのコンパイルを行うstyles
タスクを順次実行して動作を確かめます。
const gulp = require('gulp'); gulp.task('scripts', () => { return gulp.src('./src/scripts/*.js') .pipe(...) .pipe(gulp.dest('./dist/assets/js')); }); gulp.task('styles', () => { return gulp.src('./src/styles/*.css') .pipe(...) .pipe(gulp.dest('./dist/assets/css')); }); gulp.task('series', gulp.series( 'scripts', 'styles' ) );
これを実行します。
$ ./node_modules/.bin/gulp series [22:21:11] Using gulpfile ~/programming/.../gulpfile.js [22:21:11] Starting 'series'... [22:21:11] Starting 'scripts'... [22:21:11] Finished 'scripts' after 357 ms [22:21:11] Starting 'styles'... [22:21:15] Finished 'styles' after 3.25 s [22:21:15] Finished 'series' after 3.61 s
scripts
タスクの完了を待ってから styles
タスクが開始されていますね。
parallel の使い方
parallel は並列(非同期的とも言える)に処理を実行します。先程の scripts
タスクは結果を styles
タスクで利用しているわけではないので、実は並列で実行してしまってもよい処理でした。なので、この2つを parallel に置き換えます。
const gulp = require('gulp'); gulp.task('scripts', () => { return gulp.src('./src/scripts/*.js') .pipe(...) .pipe(gulp.dest('./dist/assets/js')); }); gulp.task('styles', () => { return gulp.src('./src/styles/*.css') .pipe(...) .pipe(gulp.dest('./dist/assets/css')); }); gulp.task('series', gulp.series( 'scripts', 'styles' ) );
これを実行します。
$ ./node_modules/.bin/gulp parallel [22:26:54] Using gulpfile ~/programming/.../gulpfile.js [22:26:54] Starting 'parallel'... [22:26:54] Starting 'scripts'... [22:26:54] Starting 'styles'... [22:26:57] Finished 'scripts' after 2.7 s [22:26:57] Finished 'styles' after 2.86 s [22:26:57] Finished 'parallel' after 2.86 s
parallel
タスクの実行と同時に scripts
タスクと styles
タスクが並列で Starting していますね。
並列なので、全体の処理速度も先程の series の処理時間 3.61 s
と比較して parralel は 0.75 s
速いです。
series と parallels を併用してみる
最近、自分が実際に実装した中で series と parallels を併用したパターンを例に取ってみます。
例えば、ビルド作業の前処理と後処理が必要な場合、これらは必ずビルドの最初と最後に実行したいので直列的に扱いたいです。一方でビルド作業自体で実行される各ビルドタスクはそれぞれ独立した処理を行うため並列的に実行しても問題ないという場合があります。
図示したものが以下です。
処理の流れを通明すると、
build
タスクが開始- 前処理として
clean
タスクを実行する clean
タスクが完了するのと同時に、scripts
、styles
、html
タスクなどが並列で実行する- それら並列で実行されたタスクがすべて終了したあと、後処理である
zip
タスクを実行する build
タスクが終了
並列の処理はなるべく parallel でまとめて実行してあげることによって、タスク全体の処理速度の向上が期待できます。
具体的なコードは以下です。
上記コードを実行すると、
$ ./node_modules/.bin/gulp build [23:30:04] Using gulpfile ~/programming/.../gulpfile.js [23:30:04] Starting 'build'... [23:30:04] Starting 'clean'... [23:30:04] Finished 'clean' after 54 ms [23:30:04] Starting 'scripts'... [23:30:04] Starting 'styles'... [23:30:04] Starting 'html'... [23:30:04] Starting 'fonts'... [23:30:04] Starting 'images'... [23:30:04] Starting 'vendors'... [23:30:04] Starting 'manifest'... [23:30:06] Finished 'manifest' after 2.62 s [23:30:06] Finished 'html' after 2.69 s [23:30:07] Finished 'vendors' after 2.84 s [23:30:07] Finished 'scripts' after 2.92 s [23:30:07] gulp-imagemin: Minified 5 images (saved 2.91 kB - 23.9%) [23:30:07] Finished 'fonts' after 3.36 s [23:30:07] Finished 'images' after 3.36 s [23:30:07] Finished 'styles' after 3.55 s [23:30:07] Starting 'zip'... [23:30:07] Finished 'zip' after 99 ms [23:30:07] Finished 'build' after 3.71 s
clean
タスクが Finished するのと同時に各種ビルドタスクが一斉に Starting しており、すべてのビルドタスクが終了したタイミング(今回であれば styles
が一番最後に Finished している)で 後処理である zip
タスクが走っています。
以上です。