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

Posted 2021-04-08 大敏的技术栈

定义一个任务

格式

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');
});