はじめに
前回はgulpのsrcとdistの機能を使ってファイルのコピーをコマンドで実行するところまで説明しました。
まだの方はこちらを参照してください。
今回はgulpのseriesとparallelという機能を使って複数タスクを実行させるところまで説明していきます。
その他gulpのおすすめのプラグインはこちら
gulpの使い方まとめについてはこちら。
gulpfile.jsのテンプレート紹介についてはこちら。
それではseriesとparallelの使い方に移ります。
seriesとparallelとは
seriesとparallelはどちらも複数のタスクを実行をする際に使用します。
それぞれの違いは以下になります。
series
| 処理順序 | 順次実行型 |
| メリット | 指定した順番にタスクを実行することができる。 |
| デメリット | 「parallel」よりも処理時間が掛かる。 |
parallel
| 処理順序 | 並列実行型 |
| メリット | 複数のタスクを同時に実行できるので処理時間が早くなる。 |
| デメリット | 実行順序が決まっているタスクに対して使用するとエラーが出る可能性がある。 |
使い始めはそこまで処理時間にこだわらなくてもいいです。
ディレクトリ構成
基本的には前回のディレクトリ構成と同じになります。
またsrcフォルダの中にindex1.html index2.html index3.html を作成します。
test
├ node_modules
├ dist
├ src
│ ├ index1.html
│ ├ index2.html
│ └ index3.html
├ gulpfile.js
├ package-lock.json
└ package.json今回のゴールは以下です。
gulpのコマンドを実行してdistフォルダの中にsrcフォルダのindex1.html index2.html index3.html をコピーする
gulpfile.jsを編集する
まずは完成形を記載しておきます。
//----------------------------------------------------------------------
// モード
//----------------------------------------------------------------------
"use strict";
//----------------------------------------------------------------------
// モジュール読み込み
//----------------------------------------------------------------------
const gulp = require("gulp");
const { src, dest, series, parallel, watch } = require("gulp");
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function copy1(done) {
src("./src/index1.html")
.pipe(dest("./dist/"));
done();
}
function copy2(done) {
src("./src/index2.html")
.pipe(dest("./dist/"));
done();
}
function copy3(done) {
src("./src/index3.html")
.pipe(dest("./dist/"));
done();
}
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.copy_series = series(copy1,copy2,copy3);
exports.copy_parallel = parallel(copy1,copy2,copy3);
/************************************************************************/
/* END OF FILE */
/************************************************************************/それではセクションごとに説明していきます。
関数定義
//----------------------------------------------------------------------
// 関数定義
//----------------------------------------------------------------------
function copy1(done) {
src("./src/index1.html")
.pipe(dest("./dist/"));
done();
}
function copy2(done) {
src("./src/index2.html")
.pipe(dest("./dist/"));
done();
}
function copy3(done) {
src("./src/index3.html")
.pipe(dest("./dist/"));
done();
}関数の定義をしています。
念のためそれぞれの関数の処理内容を以下にまとめておきます。
| 関数名 | 処理内容 |
| copy1 | index1.htmlをdistフォルダへコピー |
| copy2 | index2.htmlをdistフォルダへコピー |
| copy3 | index3.htmlをdistフォルダへコピー |
タスク定義
//----------------------------------------------------------------------
// タスク定義
//----------------------------------------------------------------------
exports.copy_series = series(copy1,copy2,copy3);
exports.copy_parallel = parallel(copy1,copy2,copy3);seriesで実行するコマンドを「copy_series」、parallelで実行するコマンドを「copy_parallel」としました。
タスクはseriesもしくはprallelの中にカンマ区切りで順番に記述していきましょう。
コマンドを実行しよう
それではgulpでcopyコマンドを実行しましょう。
npx gulp copy_seriesnpx gulp copy_parallel「npx」のコマンド使用時にエラーが出る方はこちらを参照してください。
gulpのインストール先が異なる可能性があります。
どちらも以下のようにタスクが実行されていれば正しく動作しています。
[00:00:00] Starting 'copy'...
[00:00:00] Starting 'copy1'...
[00:00:00] Finished 'copy1' after 13 ms
[00:00:00] Starting 'copy2'...
[00:00:00] Finished 'copy2' after 3.65 ms
[00:00:00] Starting 'copy3'...
[00:00:00] Finished 'copy3' after 2.21 ms
[00:00:00] Finished 'copy' after 23 ms今回のような簡単な処理だとseriesとparallelでは差は生じにくいですね。
処理が多くなってきた場合にご自身の環境で試してみてください。
おわりに
以上gulpのseriesとparallelという機能を使って複数コマンドを実行させるところまで説明しました。
いかがだったでしょうか。
複数タスクを実行する際はseriesかparallelどちらが適切か上手く使い分けてみましょう。
次回はwatchという機能を使ってファイルの変更を監視し、変更が検出されたらタスクを実行するやり方について説明していきます。
コメント