gulp源码解析之任务管理

最新推荐文章于 2022-02-25 15:48:30 发布
最新推荐文章于 2022-02-25 15:48:30 发布
阅读量306 收藏
点赞数
文章标签： 前端 操作系统 javascript ViewUI
原文链接：https://juejin.im/post/59dc21016fb9a045023a949f
版权

提到前端工程的自动化构建，gulp是其中很重要的一个工具，gulp是一种基于stream的前端构建工具，相比于grunt使用临时文件的策略，会有较大的速度优势。本文会对gulp的主要部分进行详细剖析，期待本文能够帮助读者更好地在工程中实践gulp。

gulp等前端构建脚本并不是一种全新的思想，早在几十年前，gnu make已经在各种流行语言中风靡，并解决了相关的各种问题，可以简单的认为gulp是JavaScript语言的“make”。

Gulp 核心模块

gulp其中两大核心模块，任务管理和文件

本文通过对Orchestrator任务管理模块的源码进行分析，理清gulp是如何进行任务管理的。

通过查看gulp源码（3.x及之前的版本），可以看到，gulp所有任务管理相关的功能都是直接从Orchestrator模块继承的，而且可以发现gulp官网对相关任务管理接口的描述，和Orchestrator模块的描述几乎完全一样。

// gulp/index.js
...
var Orchestrator = require('orchestrator');
...

function Gulp() {  // 构造函数直接调用Orchestrator
  Orchestrator.call(this);
}

util.inherits(Gulp, Orchestrator);  // 从Orchestrator继承而来

Gulp.prototype.task = Gulp.prototype.add;  // task方法直接使用Orchestrator中的add
...复制代码

所以下面就一起来分析一下Orchestrator模块。

Orchestrator 模块

Orchestrator github主页中对自身的描述

A module for sequencing and executing tasks and dependencies in maximum concurrency.

简单翻译就是

一个能够以最大并发性对任务及其依赖任务进行排序执行的模块。

Orchestrator模块主要就是添加管理执行任务，并对任务的执行提供异步支持，分别对应

  • add - 添加任务

    add用于添加任务，传入任务task的名字，依赖数组，以及任务回调函数。
    orchestrator中使用核心属性tasks对象保存各个任务

  • start - 执行任务

    start用于执行之前定义的任务，如果传入多个任务，start会进行合并，依次放入到任务数组，然后对任务数组序列按照依赖关系进行去重排序，最终对排序的任务数组依次执行

下面是具有完整注释的源码。

// Orchestrator/index.js

/*jshint node:true */

"use strict";

var util = require('util');
var events = require('events');
var EventEmitter = events.EventEmitter;
var runTask = require('./lib/runTask');

/*
 构造函数里面
 首先调用node中事件模块的构造函数EventEmitter，

 EventEmitter.call(this);

 这是一种典型的用法，直接挂载Event模块实例属性及方法。

 接下来初始化了Orchestrator最核心的几个属性：

 doneCallback 是所有任务执行完成后的回调
 seq 是排序后的任务队列，对任务及其依赖的排序是通过seqencify模块进行的，后面会介绍。
 tasks 保存了所有定义的任务，通过add原型方法添加任务。
 isRunning 标识当前是否有任务正在执行
*/
var Orchestrator = function () {
    EventEmitter.call(this);
    this.doneCallback = undefined; // call this when all tasks in the queue are done
    this.seq = []; // the order to run the tasks
    this.tasks = {}; // task objects: name, dep (list of names of dependencies), fn (the task to run)
    this.isRunning = false; // is the orchestrator running tasks? .start() to start, .stop() to stop
};

/*
 * 继承Event模块
 */
util.inherits(Orchestrator, EventEmitter);

/*
 * 重置Orchestrator模块，即重置orchestrator实例的相应状态和属性
 */
Orchestrator.prototype.reset = function () {
    if (this.isRunning) {
        this.stop(null);
    }
    this.tasks = {};
    this.seq = [];
    this.isRunning = false;
    this.doneCallback = undefined;
    return this;
};

/*
  add前面主要是对参数进行了一些校验检测，最后将任务task的名字，依赖，回调添加到核心属性tasks中
*/
Orchestrator.prototype.add = function (name, dep, fn) {
    if (!fn && typeof dep === 'function') {
        fn = dep;
        dep = undefined;
    }
    dep = dep || [];
    fn = fn || function () {}; // no-op
    if (!name) {
        throw new Error('Task requires a name');
    }
    // validate name is a string, dep is an array of strings, and fn is a function
    if (typeof name !== 'string') {
        throw new Error('Task requires a name that is a string');
    }
    if (typeof fn !== 'function') {
        throw new Error('Task '+name+' requires a function that is a function');
    }
    if (!Array.isArray(dep)) {
        throw new Error('Task '+name+' can\'t support dependencies that is not an array of strings');
    }
    dep.forEach(function (item) {
        if (typeof item !== 'string') {
            throw new Error('Task '+name+' dependency '+item+' is not a string');
        }
    });
    this.tasks[name] = {
        fn: fn,
        dep: dep,
        name: name
    };
    return this;
};

/*
  如果只给了task的名字，则直接获取之前定义task，否则通过add添加新的task
*/
Orchestrator.prototype.task = function (name, dep, fn) {
    if (dep || fn) {
        // alias for add, return nothing rather than this
        this.add(name, dep, fn);
    } else {
        return this.tasks[name];
    }
};

/*
  判断是否已经定义了某个task
*/
Orchestrator.prototype.hasTask = function (name) {
    return !!this.tasks[name];
};

/*
 * 开始运行任务
 * 首先会判断传入参数最后一个是否为函数，如果是，则作为所有任务
 * 结束后的回调，否则也会将其当做一个任务
 * 
 * 依次循环收集最后一个参数之前的所有参数（如果最后一个参数不是
 * 函数，也将其收集），放入任务数组；
 * 
 * 对任务数组序列按照依赖关系进行去重排序
 * 
 * 调用runStep依次执行排序后的任务数组
 */
Orchestrator.prototype.start = function() {
    var args, arg, names = [], lastTask, i, seq = [];
    args = Array.prototype.slice.call(arguments, 0);
    if (args.length) {
        lastTask = args[args.length-1];
        if (typeof lastTask === 'function') {
            this.doneCallback = lastTask;
            args.pop();
        }
        for (i = 0; i < args.length; i++) {
            arg = args[i];
            if (typeof arg === 'string') {
                names.push(arg);
            } else if (Array.isArray(arg)) {
                names = names.concat(arg); // FRAGILE: ASSUME: it's an array of strings
            } else {
                throw new Error('pass strings or arrays of strings');
            }
        }
    }
    if (this.isRunning) {
        // reset specified tasks (and dependencies) as not run
        this._resetSpecificTasks(names);
    } else {
        // reset all tasks as not run
        this._resetAllTasks();
    }
    if (this.isRunning) {
        // if you call start() again while a previous run is still in play
        // prepend the new tasks to the existing task queue
        names = names.concat(this.seq);
    }
    if (names.length < 1) {
        // run all tasks
        for (i in this.tasks) {
            if (this.tasks.hasOwnProperty(i)) {
                names.push(this.tasks[i].name);
            }
        }
    }
    seq = [];
    try {
        this.sequence(this.tasks, names, seq, []);
    } catch (err) {
        // Is this a known error?
        if (err) {
            /* sequencify模块会根据以下两种不同情况抛出异常，
             * 一种为任务未定义；另一种为任务序列出现循环依赖
             */
            if (err.missingTask) {
                this.emit('task_not_found', {message: err.message, task:err.missingTask, err: err});
            }
            if (err.recursiveTasks) {
                this.emit('task_recursion', {message: err.message, recursiveTasks:err.recursiveTasks, err: err});
            }
        }
        this.stop(err);
        return this;
    }
    this.seq = seq;
    this.emit('start', {message:'seq: '+this.seq.join(',')});
    if (!this.isRunning) {
        this.isRunning = true;
    }
    this._runStep();
    return this;
};


/* 停止orchestrator实例，根据结束类型的不同，抛出不同的消息
 * 如果定义了回调，则执行回调
 */
Orchestrator.prototype.stop = function (err, successfulFinish) {
    this.isRunning = false;
    if (err) {
        this.emit('err', {message:'orchestration failed', err:err});
    } else if (successfulFinish) {
        this.emit('stop', {message:'orchestration succeeded'});
    } else {
        // ASSUME
        err = 'orchestration aborted';
        this.emit('err', {message:'orchestration aborted', err: err});
    }
    if (this.doneCallback) {
        // Avoid calling it multiple times
        this.doneCallback(err);
    } else if (err && !this.listeners('err').length) {
        // No one is listening for the error so speak louder
        throw err;
    }
};

/*
 * 引入任务及其依赖任务的排序模块
 */
Orchestrator.prototype.sequence = require('sequencify');

/*
  简单的循环判断是否所有的任务都已经执行完毕
*/
Orchestrator.prototype.allDone = function () {
    var i, task, allDone = true; // nothing disputed it yet
    for (i = 0; i < this.seq.length; i++) {
        task = this.tasks[this.seq[i]];
        if (!task.done) {
            allDone = false;
            break;
        }
    }
    return allDone;
};

/*
 * 重置task，重置相应的状态和属性
 */
Orchestrator.prototype._resetTask = function(task) {
    if (task) {
        if (task.done) {
            task.done = false;
        }
        delete task.start;
        delete task.stop;
        delete task.duration;
        delete task.hrDuration;
        delete task.args;
    }
};

/*
 * 循环遍历重置所有的task
 */
Orchestrator.prototype._resetAllTasks = function() {
    var task;
    for (task in this.tasks) {
        if (this.tasks.hasOwnProperty(task)) {
            this._resetTask(this.tasks[task]);
        }
    }
};

/*
 * 循环遍历重置task，并递归重置所依赖的task
 */
Orchestrator.prototype._resetSpecificTasks = function (names) {
    var i, name, t;

    if (names && names.length) {
        for (i = 0; i < names.length; i++) {
            name = names[i];
            t = this.tasks[name];
            if (t) {
                this._resetTask(t);
                if (t.dep && t.dep.length) {
                    this._resetSpecificTasks(t.dep); // recurse
                }
            //} else {
                // FRAGILE: ignore that the task doesn't exist
            }
        }
    }
};

/* 逐个运行任务，当所有任务都结束后，停止orchestrator实例 */
Orchestrator.prototype._runStep = function () {
    var i, task;
    if (!this.isRunning) {
        return; // user aborted, ASSUME: stop called previously
    }
    for (i = 0; i < this.seq.length; i++) {
        task = this.tasks[this.seq[i]];
        if (!task.done && !task.running && this._readyToRunTask(task)) {
            this._runTask(task);
        }
        if (!this.isRunning) {
            return; // task failed or user aborted, ASSUME: stop called previously
        }
    }
    if (this.allDone()) {
        this.stop(null, true);
    }
};

/* 判断当前任务是否能运行，循环判断其所有依赖任务是否运行结束，
 * 只要有一个未定义或未结束，则不能运行
 */
Orchestrator.prototype._readyToRunTask = function (task) {
    var ready = true, // no one disproved it yet
        i, name, t;
    if (task.dep.length) {
        for (i = 0; i < task.dep.length; i++) {
            name = task.dep[i];
            t = this.tasks[name];
            if (!t) {
                // FRAGILE: this should never happen
                this.stop("can't run "+task.name+" because it depends on "+name+" which doesn't exist");
                ready = false;
                break;
            }
            if (!t.done) {
                ready = false;
                break;
            }
        }
    }
    return ready;
};

/* 设置任务的执行时间，重置任务的运行和结束标记 */
Orchestrator.prototype._stopTask = function (task, meta) {
    task.duration = meta.duration;
    task.hrDuration = meta.hrDuration;
    task.running = false;
    task.done = true;
};

/* 停止任务后收集相关的参数（任务名字，执行时间，类型，是否正常结束等抛出消息 */
Orchestrator.prototype._emitTaskDone = function (task, message, err) {
    if (!task.args) {
        task.args = {task:task.name};
    }
    task.args.duration = task.duration;
    task.args.hrDuration = task.hrDuration;
    task.args.message = task.name+' '+message;
    var evt = 'stop';
    if (err) {
        task.args.err = err;
        evt = 'err';
    }
    // 'task_stop' or 'task_err'
    this.emit('task_'+evt, task.args);
};

/*
 * 开始运行任务，并添加任务属性，args，running等
 * 最终通过runTask完成任务回调的执行并最终结束任务
 * runTask接受任务的回调，以及function(err, meta){...}回调函数为参数
 * gulp.task文档中声称对异步任务的支持，正是在runTask中完成的
 * runTask中首先会执行任务的回调函数
 *
 * 第一种对异步支持的方式可以通过向任务回调函数传入一个callback，
 * 执行callback就会调用runTask传入的第二个回调函数参数，进而结束任务
 *
 * 其他方式，如果没有传入callback，runTask中会对任务回调函数的执行
 * 结果进行三种判断，分别为promise，stream流，以及正常同步函数；
 * 对于promise和stream流，同样属于异步任务，promise会在其resolve/rejected
 * 后，调用runTask的第二个回调参数，结束任务；对于stream流，则会在
 * 流结束时刻调用runTask的第二个回调参数，结束任务；
 * 
 * 对于正常同步函数，则直接调用runTask的第二个回调参数，结束任务
 */
Orchestrator.prototype._runTask = function (task) {
    var that = this;

    task.args = {task:task.name, message:task.name+' started'};
    this.emit('task_start', task.args);
    task.running = true;

    runTask(task.fn.bind(this), function (err, meta) {
        that._stopTask.call(that, task, meta);
        that._emitTaskDone.call(that, task, meta.runMethod, err);
        if (err) {
            return that.stop.call(that, err);
        }
        that._runStep.call(that);
    });
};

// FRAGILE: ASSUME: this list is an exhaustive list of events emitted
var events = ['start','stop','err','task_start','task_stop','task_err','task_not_found','task_recursion'];

var listenToEvent = function (target, event, callback) {
    target.on(event, function (e) {
        e.src = event;
        callback(e);
    });
};

/* 监听events中所有类型的函数 */
Orchestrator.prototype.onAll = function (callback) {
    var i;
    if (typeof callback !== 'function') {
        throw new Error('No callback specified');
    }

    for (i = 0; i < events.length; i++) {
        listenToEvent(this, events[i], callback);
    }
};

module.exports = Orchestrator;复制代码
sequencify

sequencify模块主要完成的工作就是针对一个给定的任务数组序列，分析依赖关系，最终给出一个按照任务依赖顺序排列的任务数组序列，然后依次执行各个任务

// sequencify/index.js
/*jshint node:true */

"use strict";

/*
 * 四个输入参数
 * tasks: 当前定义的所有任务
 * names: 需要进行依赖分析的任务数组序列
 * results: 最终得到的按照任务依赖顺序排列的任务数组序列，
 *          并且这个任务序列是去重的
 * nest: 记录当前任务所处的依赖层次路径，比如taskA依赖taskB，
 *       taskB依赖taskC，则分析完taskA后，按照依赖关系，对
 *       taskB分析的时候，nest即为['taskA']，进一步，当分析
 *       taskC时，nest为['taskA', 'taskB']，借此来进行判断是
 *       否有循环依赖。即，如果分析一个任务时，如果其自身在
 *       nest存在，即存在循环依赖，则中断分析，抛出异常。
 */
var sequence = function (tasks, names, results, nest) {
        var i, name, node, e, j;
        nest = nest || [];
        for (i = 0; i < names.length; i++) {
                name = names[i];
                // de-dup results
                /* 任务序列去重 */
                if (results.indexOf(name) === -1) {
                        node = tasks[name];
                        if (!node) {
                            /* 任务不存在则抛出异常 */
                                e = new Error('task "'+name+'" is not defined');
                                e.missingTask = name;
                                e.taskList = [];
                                for (j in tasks) {
                                        if (tasks.hasOwnProperty(j)) {
                                                e.taskList.push(tasks[j].name);
                                        }
                                }
                                throw e;
                        }
                        if (nest.indexOf(name) > -1) {
                            /* 任务序列存在循环依赖，抛出异常 */
                                nest.push(name);
                                e = new Error('Recursive dependencies detected: '+nest.join(' -> '));
                                e.recursiveTasks = nest;
                                e.taskList = [];
                                for (j in tasks) {
                                        if (tasks.hasOwnProperty(j)) {
                                                e.taskList.push(tasks[j].name);
                                        }
                                }
                                throw e;
                        }
                        if (node.dep.length) {
                                nest.push(name);
                                sequence(tasks, node.dep, results, nest); // recurse
                                nest.pop(name);
                        }
                        results.push(name);
                }
        }
};

module.exports = sequence;复制代码

对于gulp 4.x之后的版本，gulp更换了任务管理的模块为undertaker，后续文章中会对其进一步分析，并与orchestrator进行一定的对比。

接下来的系列文章会对gulp中的stream流管理进行分析。

By Hong

weixin_34245749
关注
深入阅读gulp源码小结
WilsonLiu's Blog
07-18 1227
深入阅读gulp源码小结gulp源码简介gulp源码核心部分寥寥60+行。但是通过这60+行代码，gulp给我们带来的确是前端自动化构建的便利。以往以为其源码肯定蛮复杂， 却没想到却是这么60+行，这60+行的背后，是来自于模块化的支撑。gulp的四个接口分别来源于orchestrator,vinyl-fs两个模块。 所以gulp的所有特性都来自于这两个模块。 Orchestrator是用来任
gulp配置文件
tangcc的博客
12-08 478
package.json: { "name": "og-web20171010", "version": "1.0.0", "description": "20171010", "main": "gulpfile.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
gulp源码分析
songfei_dream的专栏
11-02 241
一.整体结构分析 整体结构 通过在nodejs环境对源码的打印，我们最终得到的gulp实例行如下图。那么我们gulp实例上的属性和方法是如何生成的呢？ Gulp { domain: null, _events: [Object: null prototype] {}, _eventsCount: 0, _maxListeners: undefined, _regis...
activity生命周期
菩提本无树 明镜亦非台 本来无一物 何处惹尘埃
06-20 1032
An activity is a single, focused thing that the user can do. Almost all activities interact with the user, so the Activity class takes care of creating a window for you in which you can place your U
解构如何运用的解构--报错 throw new TypeError('Router.use() requires a middleware function but got a ' + gettype...
weixin_30770495的博客
05-30 899
let aa={ error_code: 0, reason: "插入数据成功" };//如何拿到 error_code 和 reason 的值let { error_code, reason } = aa; console.log(error_code,reason); // 输出0 和 插入数据成功 对于报错throw new Typ eError('Ro...
gulp-dest-源码.rar
10-10
总结来说，`gulp-dest`是Gulp.js中不可或缺的一部分，通过解析其源码，我们可以了解到如何处理文件流、创建和管理文件系统路径、以及如何与Gulp的其他组件协同工作。这对于提升我们的Gulp技能，优化构建流程，以及...
gulp-ect-simple-源码.rar
10-10
《gulp-ect-simple-源码解析》 在前端开发领域，构建工具的使用极大地提高了我们的工作效率，其中Gulp是颇受欢迎的一款。本文将深入探讨`gulp-ect-simple`的源码，了解它如何结合Ect模板引擎实现项目的构建流程。 ...
gulp-msbuild：gulp-msbuild已移至https：github.comfluffynutsgulp-msbuild
02-03
通过这个插件，你可以使用`gulp`的任务管理能力来自动化.NET项目的构建，包括编译、发布等步骤。 **标签解析** 1. `gulp`：表示这是一个与`gulp`相关的项目，用于在`gulp`环境中使用。 2. `msbuild`：表明该项目...
gulp-default:这是一个的gulp项目目录
05-02
Gulp.js 是一个流行的前端任务管理器，它允许开发者通过编写简单的任务来自动化复杂的构建过程，例如文件编译、压缩、合并、重命名等。然而，根据描述，这个项目可能已经被废弃，作者考虑将它替换为使用 webpack 的...
gulp自动化
08-13
Gulp是一款基于Node.js的任务管理器，它允许开发者通过编写JavaScript脚本来定义和执行构建任务，如编译Sass、压缩CSS、合并JavaScript、图片优化等。Gulp以其流式处理的特性而闻名，这使得数据在任务之间高效传递，...
throw new TypeError(‘Router.use() requires a middleware function but got a ‘ + gettype(fn))报错解决办法
qq_37495762的博客
09-24 2569
解构如何运用的解构–报错 throw new TypeError('Router.use() 对于报错throw new TypeError('Router.use() requires a middleware function but got a ’ + gettype(fn)) 是因为你没有在最后某个文件中写： module.exports = router;
遇到的“Function statements require a function name”错误
weixin_57062916的博客
02-25 6639
遇到的“Function statements require a function name”错误
gulp学习笔记，基本使用流程，基本函数，使用监听、插件
Lu_xiuyuan的博客
01-01 322
学习gulp的简单笔记。原教学视频：https://www.bilibili.com/video/BV1NE411T7Z2?p=396。 gulp基本使用流程 初始化项目目录： cnpm init //如果出错改为npm指令 安装到项目文件夹： cnpm install gulp@3.9.1 --save-dev cnpm i gulp-scss gulp-minify-css gulp-rename -D //一次下载多个第三方插件 创建一个gulpfile.js文件 .
gulp源码解析（二）—— vinyl-fs
dcof99817的博客
01-31 321
在上一篇文章我们对 Stream 的特性及其接口进行了介绍，gulp 之所以在性能上好于 grunt，主要是因为有了Stream 助力来做数据的传输和处理。 那么我们不难猜想出，在 gulp 的任务中，gulp.src 接口将匹配到的文件转化为可读（或 Duplex/Transform）流，通过 .pipe 流经各插件进行处理，最终推送给 gulp.dest 所生成的可写（或 Dup...
几个错误的解决关键
热门推荐
我的世界我的梦
12-10 3万+
导读： 　　1、 　　org.springframework.orm.ObjectRetrievalFailureException: Object of class [com.xindeco.myregister.pojo.MyRegisterInfo] with identifier [14]: not found 　　MyRegisterInfo在数据库没有identifier [1
go的打包依赖构建工具-dep
weixin_34402408的博客
09-12 336
首先市面上大多数人都是用godep，原因是这个出来得比较早。 godep已经不再维护了，可以在github上看到以下声明： Godep - ArchivedPlease use dep or another tool instead.Godep will continue to be supported for some time but is considered to be in a st...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值