22時に寝ようと思って2時に寝る。

備忘録や日記を書いてます。きょうは早く寝よう。

Gulp - v4 の series と parallel を使って直列・並列処理を制御する

f:id:azuuun:20181021234214p:plain

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 を併用したパターンを例に取ってみます。

例えば、ビルド作業の前処理と後処理が必要な場合、これらは必ずビルドの最初と最後に実行したいので直列的に扱いたいです。一方でビルド作業自体で実行される各ビルドタスクはそれぞれ独立した処理を行うため並列的に実行しても問題ないという場合があります。

図示したものが以下です。

f:id:azuuun:20181021231358p:plain

処理の流れを通明すると、

  1. build タスクが開始
  2. 前処理として clean タスクを実行する
  3. cleanタスクが完了するのと同時に、scriptsstyleshtml タスクなどが並列で実行する
  4. それら並列で実行されたタスクがすべて終了したあと、後処理である zip タスクを実行する
  5. 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 タスクが走っています。

以上です。

参考

gulpjs.org