介绍
在前端开发中，很多时候需要使用 Gulp 进行任务系统的构建，但是在复杂的项目中，可能会有许多任务需要顺序执行、并行执行或者需要耗费比较长的时间，如果能够统计每个任务的时间花费，对于优化项目的构建有很大的帮助。而 npm 包 gulp-total-task-time 就是为了解决这个问题而开发的。
gulp-total-task-time 可以在 Gulp 任务执行时统计每个任务的耗时，并且输出在命令行中，为开发者提供实时的数据反馈，帮助优化项目构建的效率。本文将向您介绍使用 gulp-total-task-time 的方法，包括安装、使用和在 gulpfile 中实现统计。
安装
要使用 gulp-total-task-time，首先需要在本地安装上述包作为依赖项。
打开终端进入项目目录，依次输入以下命令：
npm install --save-dev gulp-total-task-time
在执行完上述命令后，需要在 gulpfile.js 中引入 gulp-total-task-time 模块：
const gulp = require('gulp');
const totalTaskTime = require('gulp-total-task-time');使用
在 gulpfile.js 中使用 gulp-total-task-time 最关键的是要在 gulp 任务的末尾调用一下 totalTaskTime 函数，这样它才能计算出任务执行的耗时。接下来是一个例子：
gulp.task('exampleTask', () => {
return gulp
.src('src/*')
.pipe(doSomething())
.pipe(totalTaskTime()); // 计算 exampleTask 的耗时
});执行 exampleTask 任务的时候，gulp-total-task-time 就会自动统计耗用在这个任务中的总时长并输出到命令行中。
总的来说，使用 gulp-total-task-time 的方法非常简单。只需要将它放在任务链的最后一步中，就能统计每个任务的耗时了。为了更深入地理解这个 npm 包，我们还可以看看它的 API。
options: 参数对象，包括：minTime：过滤掉时间少于指定时间的任务。默认值为5秒。failAfter：如果某个任务花费时间超过此阈值，则构建失败。默认为Infinity。totalTime：计算所有任务的耗时总和，而不是每个任务的耗时。默认为false。pretty：如果设置为true，则在命令行中展示精美的耗时统计信息。默认为false。showTasks：如果设置为true，则对目标模块中的所有任务进行耗时统计。默认为false。sortBy：按指定属性对任务进行排序。默认为时间。sortOrder：按照升序或降序展示任务统计信息。默认为降序。
实现
最后，我们还是来看一下如何在 gulpfile.js 中实现 gulp-total-task-time 的统计功能。下面的例子展示了如何使用许多任务，并进行排序和设置阈值。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - -----------------------
----- ------ - -----------------------
----- ------ - -----------------------
----- ---- - ---------------------
----- ------- - ------------------------
----- ------------ - ------------------------
----- ------- - -------------------
----- --- - ---------------
----- ------------- - --------------------------------
------------------ -- -- -
------ --------------
---
----------------- -- -- -
------ ----
------------------
---------------
----------------------
-----------------------
---
-------------------- -- -- -
------ ----
------------------
-----------------------
---------------
------------------------
-----------------------
---
------------------- -- -- -
----- ------- - ---------------- -----------
------ ----
--------------------
-------------
-----------------------
------------------------
-----------------------
---
------------------ ------------------------ -----------
----------------- -------------------- ------- ----------
-------------------- ------------------- -- -- -
------ --------------- ------- ---------- --- -- -------------
----这个例子中包含了一些常见的 Gulp 任务，如删除文件夹、ESLint 校验、JavaScript 压缩和合并、SASS 文件编译和 CSS 优化等。我们还使用了一些可选参数来设置展示效果，比如展示每个任务的耗时，并按照时间升序排序输出。
在执行 Gulp 命令时就能够看到命令行中展示的每个任务的耗时统计信息了。如果某个任务超过了指定的阈值，则会引起构建失败，从而避免了不必要的浪费。本文所介绍的 gulp-total-task-time 给出了一个非常好的示例，说明了在项目开发中使用 npm 包的重要性。通过它可以更好的优化项目的效率，帮助前端开发者更快地完成各种任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb08b5cbfe1ea061252f