Gulp task 任务顺序执行,适合顺序执行

🌙
手机阅读
本文目录结构
axihe

组合任务

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

series() 序列执行(适合顺序执行)

如果需要让任务(task)按顺序执行,请使用 series() 方法。

简单例子

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

function transpile(cb) {
    // body omitted
    console.log('axihe-001');

    cb();
}

function bundle(cb) {
    // body omitted
    console.log('axihe-002');
    cb();
}

exports.default = series(transpile, bundle);

可以看到运行结果是先打印axihe-001,然后打印axihe-002

https://a.axihe.com/npm/gulp/mintty_ASfWrjtTWu.png

上面这个例子,可能不直观,再举一个例。

模拟真实例子

真实项目中,每一个任务多久可以完成,其实是一个未知的,下面用 sleep 来模拟消耗的时间。

对下面sleep不了解的,可以参考本人写的博文 JavaScript sleep 实现

const { series } = 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);

运行的结果如下:无论第一个html任务消耗多久,后面的 cssjavascript 任务,都要等待其完成后才能执行;

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

https://a.axihe.com/npm/gulp/mintty_u4eXQI6LmL.png


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang