Gulp task 任务并行执行,适合高并发执行

组合任务

Gulp 提供了两个强大的组合方法： series() 和 parallel()，允许将多个独立的任务组合为一个更大的操作。这两个方法都可以接受任意数目的任务（task）函数或已经组合的操作。series() 和 parallel() 可以互相嵌套至任意深度。

parallel() 并行，适合高并发执行

对于希望以最大并发来运行的任务（tasks），可以使用 parallel() 方法将它们组合起来。

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

function sleep(time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

async function html(cb) {
    // body omitted
    await sleep(1000);
    console.log('axihe---html');
    cb();
}

async function css(cb) {
    // body omitted
    await sleep(500);
    console.log('axihe---CSS');
    cb();
}

async function javascript(cb) {
    // body omitted
    await sleep(250);
    console.log('axihe---javascript');
    cb();
}

// exports.default = series(html, css, javascript);
exports.default = parallel(html, css, javascript);

运行后的结果，会发现，javascript 因为运行时间短，先完成；而后是 css，最后是 html

异步执行

下面是异步执行的方式，注意setTimeout内的代码会异步执行，而不是上面 sleep 那种同步的。

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

function html(cb) {
    // body omitted
    setTimeout(() => {
        console.log('axihe---html');
    }, 1000)
    cb();
}
function css(cb) {
    // body omitted
    setTimeout(() => {
        console.log('axihe---css');
    }, 600)
    cb();
}

function javascript(cb) {
    // body omitted
    setTimeout(() => {
        console.log('axihe---javascript');
    }, 200)
    cb();
}

exports.default = parallel(html, css, javascript);

结果如下

换一种写法

const { parallel } = require('gulp');
function html(cb) {
    // body omitted
    setTimeout(() => {
        console.log('axihe---html');
        cb();
    }, 1000)
}
function css(cb) {
    // body omitted
    setTimeout(() => {
        console.log('axihe---css');
        cb();
    }, 600)
}
function javascript(cb) {
    // body omitted
    setTimeout(() => {
        console.log('axihe---javascript');
        cb();
    }, 200)
}
exports.default = parallel(html, css, javascript);

注意观察完成时间Finished 'default' after 1.01 s,顺序执行和并发执行，时间耗费是一定不一样的。