タスクの作成#

各gulpタスクは、非同期JavaScript関数です。つまり、エラーファーストコールバックを受け入れるか、ストリーム、Promise、イベントエミッター、子プロセス、またはObservableを返す関数です（詳細は後述）。プラットフォームの制限により、同期タスクはサポートされていませんが、かなり便利な代替手段があります。

エクスポート#

タスクは、パブリックまたはプライベートと見なすことができます。

パブリックタスクはgulpfileからエクスポートされ、gulpコマンドで実行できます。
プライベートタスクは内部的に使用されるように作成され、通常はseries()またはparallel()合成の一部として使用されます。

プライベートタスクは、他のタスクと同様に動作しますが、エンドユーザーはそれを独立して実行することはできません。タスクをパブリックに登録するには、gulpfileからエクスポートします。

const { series } = require('gulp');

// `clean`関数はエクスポートされていないため、プライベートタスクと見なすことができます。
// `series()`合成内で引き続き使用できます。
function clean(cb) {
 // 本文は省略
 cb();
}

// `build`関数はエクスポートされているため、パブリックであり、`gulp`コマンドで実行できます。
// `series()`合成内でも使用できます。
function build(cb) {
 // 本文は省略
 cb();
}

exports.build = build;
exports.default = series(clean, build);

ALT TEXT MISSING

以前は、`task()`を使用して関数をタスクとして登録していました。そのAPIはまだ使用可能ですが、エクスポートが機能しないエッジケースを除いて、エクスポートが主要な登録メカニズムである必要があります。

タスクの合成#

Gulpは、series()とparallel()という2つの強力な合成メソッドを提供しており、個々のタスクをより大きな操作に合成できます。どちらのメソッドも、任意の数のタスク関数または合成操作を受け入れます。 series()とparallel()は、それ自体の中または互いの中に任意の深さまでネストできます。

タスクを順に実行するには、series()メソッドを使用します。

const { series } = require('gulp');

function transpile(cb) {
 // 本文は省略
 cb();
}

function bundle(cb) {
 // 本文は省略
 cb();
}

exports.build = series(transpile, bundle);

タスクを最大限の並行性で実行するには、parallel()メソッドと組み合わせます。

const { parallel } = require('gulp');

function javascript(cb) {
 // 本文は省略
 cb();
}

function css(cb) {
 // 本文は省略
 cb();
}

exports.build = parallel(javascript, css);

series()またはparallel()が呼び出されると、タスクはすぐに合成されます。これにより、個々のタスク内で条件付きの動作を行う代わりに、合成のバリエーションが可能になります。

const { series } = require('gulp');

function minify(cb) {
 // 本文は省略
 cb();
}


function transpile(cb) {
 // 本文は省略
 cb();
}

function livereload(cb) {
 // 本文は省略
 cb();
}

if (process.env.NODE_ENV === 'production') {
 exports.build = series(transpile, minify); // 本番環境の場合は、トランスパイルと圧縮を実行
} else {
 exports.build = series(transpile, livereload); // 開発環境の場合は、トランスパイルとライブリロードを実行
}

series() と parallel() は任意の深さまでネストできます。

const { series, parallel } = require('gulp'); // gulpからseriesとparallel関数をインポート

function clean(cb) {
 // 本文は省略
 cb();
}

function cssTranspile(cb) { // CSSのトランスパイル処理
 // 本文は省略
 cb();
}

function cssMinify(cb) { // CSSの圧縮処理
 // 本文は省略
 cb();
}

function jsTranspile(cb) { // JavaScriptのトランスパイル処理
 // 本文は省略
 cb();
}

function jsBundle(cb) { // JavaScriptのバンドル処理
 // 本文は省略
 cb();
}

function jsMinify(cb) { // JavaScriptの圧縮処理
 // 本文は省略
 cb();
}

function publish(cb) { // パブリッシュ処理
 // 本文は省略
 cb();
}

exports.build = series(
 clean, // クリーンタスク
 parallel(
 cssTranspile, // CSSトランスパイルを並列で実行
 series(jsTranspile, jsBundle) // JavaScriptのトランスパイルとバンドルを直列で実行
 ),
 ), parallel(cssMinify, jsMinify), // CSSとJavaScriptの圧縮を並列で実行
publish // パブリッシュを実行
);

合成された操作を実行すると、各タスクは参照されるたびに実行されます。たとえば、2 つの異なるタスクの前に参照される `clean` タスクは 2 回実行され、予期しない結果につながります。代わりに、`clean` タスクを最後の合成で指定するようにリファクタリングしてください。

このようなコードがある場合

// これは誤りです
const { series, parallel } = require('gulp');

const clean = function(cb) { // クリーンタスク
 // 本文は省略
 cb();
};

const css = series(clean, function(cb) { // CSSタスク
 // 本文は省略
 cb();
});

const javascript = series(clean, function(cb) { // JavaScriptタスク
 // 本文は省略
 cb();
});

exports.build = parallel(css, javascript); // CSSとJavaScriptタスクを並列で実行

こちらに移行してください

const { series, parallel } = require('gulp'); // gulpからseriesとparallel関数をインポート

function clean(cb) {
 // 本文は省略
 cb();
}

function css(cb) {
 // 本文は省略
 cb();
}

function javascript(cb) {
 // 本文は省略
 cb();
}

exports.build = series(clean, parallel(css, javascript)); // まずクリーンを実行し、その後CSSとJavaScriptタスクを並列で実行