搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 大敏的技术栈 > #每天五分钟之IT技能包# 前端自动化构建利器 gulp (2) 任务篇

#每天五分钟之IT技能包# 前端自动化构建利器 gulp (2) 任务篇

大敏的技术栈 2017-11-30

定义一个任务

格式

gulp.task("<taskname>"[, deps], fn);

taskname: 任务名称,必须,这是一个任务的标识,不能与其它任务名称重名,任务名不能有空格

deps: 当前任务依赖的任务,被依赖的任务将先于当前任务被执行

fn: 任务执行函数,当前任务的操作主体都写在这个函数里

例1:一次性依赖多个任务

任务ex1依赖任务ex1_one、ex1_two

任务执行流程为 ex1_one -> ex1_two -> ex1

var gulp = require('gulp');
gulp.task('ex1_one', [], function() {
    console.log('start task one');
});
gulp.task('ex1_two', [], function() {
    console.log('start task two');
});
gulp.task('ex1', ['ex1_one', 'ex1_two'], function() {
    console.log('start example');
});

运行后输出:

start task one
start task two
start example

例2:重复依赖同一个任务

任务ex2依赖任务ex2_one、ex2_two

任务ex2_one依赖任务ex2_two

ex2_two被ex2及ex2_one同时依赖,但ex2_two只会被执行一次,并不会多次执行,

ex2_two的执行顺序会根据依赖的关系进行调整

任务执行流程为 ex2_two -> ex2_one -> ex1

var gulp = require('gulp');
gulp.task('ex2_one', ['ex2_two'], function() {
    console.log('start task one');
});
gulp.task('ex2_two', [], function() {
    console.log('start task two');
});
gulp.task('ex2', ['ex2_one', 'ex2_two'], function() {
    console.log('start example');
});

运行后输出

start task two
start task one
start example

例3:异步任务

通过前两个例子,可以看到,gulp 会根据依赖列表中的顺序先后依次执行,但这里所谓的先后只是开始执行的顺序。

事实上,gulp 执行任务时总是以最大的并发数执行,也就是说,gulp 会一次性运行所有的任务,并且不做任何等待。

在上面两个例子中,看到的先后执行顺序,是因为每一个任务内容太少,瞬间执行完成,所以看上去跟同步执行一样,通过下面的例子,即可看出差异。

将 [例1] 进行改装,在任务one中添加一个异步操作,然后再观察输出。

ex3 才及 ex3_two 并没有等待 ex3_one 执行完成后才开始执行,而是马上执行。

gulp.task('ex3_one', [], function() {
    setTimeout(function() {
        console.log('start task one delay 2s');
    }, 1);
});
gulp.task('ex3_two', [], function() {
    console.log('start task two');
});
gulp.task('ex3', ['ex3_one', 'ex3_two'], function() {
    console.log('start example');
});

运行后输出

start task two
start example
start task one delay 2s

例4:任务同步

如果一个任务是在另外一个任务彻底完成之后再开始执行,也就是同步执行,gulp 中有三种方法可以实现

  • 1、使用回调函数

gulp.task('ex4_three', [], function(cb) {
    setTimeout(function() {
        console.log('start task three delay 2s');
        cb();
    }, 2);
});
  • 2、使用promise(需要安装 q 插件,怎么安装?查看上一章)

var Q = require('q');
gulp.task('ex4_four', [], function() {
    var deferred = Q.defer();
    setTimeout(function() {
        console.log('start task four delay 1s');
        return deferred.resolve();
    }, 1);
    return deferred.promise;
});
  • 3、返回一个stream

gulp.task('ex4_five', [], function() {
    var src = gulp.src('package.json');
    setTimeout(function() {
        console.log('start task four delay 1s');
        return deferred.resolve();
    }, 1);
    console.log('start task five');
    return src;
});

但这里的同步,是相对依赖的任务而言,如果依赖多个时,被依赖的各任务间,依然是异步执行

如下例中所示,ex4_two 依赖不会等待 ex4_one 执行完成,而会优先执行,但是 ex4 则会等待依赖的三个任务全部执行完成后才会执行,也就是说,被依赖的任务中,有一个使用了同步,则意味着对整个任务实现了同步。

gulp.task('ex4', ['ex4_one', 'ex4_two', 'ex4_three'], function() {
    console.log('start example');
});


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《#每天五分钟之IT技能包# 前端自动化构建利器 gulp (2) 任务篇》的版权归原作者「大敏的技术栈」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注大敏的技术栈微信公众号

大敏的技术栈微信公众号:gh_a29815cd2d0e

大敏的技术栈

手机扫描上方二维码即可关注大敏的技术栈微信公众号

大敏的技术栈最新文章

精品公众号随机推荐

上一篇 >>

c#异步编程-线程