介绍
gulp-filelog 是一个 gulp 插件，可以用来显示 gulp 任务运行的日志信息，包括任务名称、文件数量等等。它可以提高我们对 gulp 任务运行情况的了解程度，方便我们调试和优化任务。
安装
使用 npm 安装：
npm install gulp-filelog --save-dev
使用步骤
步骤 1：引入 gulp 和 gulp-filelog
const gulp = require('gulp');
const filelog = require('gulp-filelog');步骤 2：创建 gulp 任务
gulp.task('taskName', function() {
return gulp.src('src/**/*.js')
.pipe(filelog())
.pipe(gulp.dest('dist'));
});在 gulp.src 后面使用 filelog() 方法，它会记录下来文件的数量、任务名等信息，然后通过管道传递给后面的操作。
步骤 3：运行 gulp 任务
gulp taskName
配置选项
在使用 filelog() 方法时，我们可以传入一些配置参数，以掌握更多有用的调试信息。以下是可用的配置参数：
verbose
- 类型：
Boolean - 默认值：
false
是否显示更详细的日志信息，包括每个文件的路径、文件大小、文件类型等。如下所示：
[filelog] Task "taskName" processed 5 files:
- app.js 100.43 KB JavaScript
- utils.js 23.46 KB JavaScript
- styles.css 10.11 MB CSS
- index.html 4.57 KB HTML
- img/logo.png 1.25 MB PNGprefix
- 类型：
String - 默认值：
[filelog]
指定日志信息前缀，用来醒目地标记出这一部分日志信息。
suffix
- 类型：
String - 默认值：
processed <%= processedFilesCount %> files:
指定日志信息后缀，用来说明这一部分日志信息所代表的含义。
customSummary
- 类型：
Function - 默认值：
null
自定义任务完成后输出的总结信息，比如可以输出任务耗时、成功运行的文件数量等等。该函数接受一个参数，即当前任务的统计信息（包括已处理的文件数量、任务开始时间、任务结束时间等），返回一个字符串。如下所示：
-- -------------------- ---- -------
--------------------- ---------- -
--- --------- - --- -------
------ -----------------------
---------------
-------------- ----------------- -
--- ------- - --- -------
--- ---- - ------------------ - -------------------- - -----
--- ------- - ----- -------- -- - - --------------- - -- --
------- -- ----- - - --------------------------- - - --------- --------
------ --------
-
---
-------------------------
---示例代码
const gulp = require('gulp');
const filelog = require('gulp-filelog');
gulp.task('taskName', function() {
return gulp.src('src/**/*.js')
.pipe(filelog())
.pipe(gulp.dest('dist'));
});结论
gulp-filelog 是一个非常实用的 gulp 插件，可以帮助我们更好地理解湖泊任务执行的过程，及时发现问题，优化代码。在实际项目中使用时，可以根据需要灵活地配置各种选项，满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70174