在前端开发过程中，我们常常需要使用任务自动化工具来提高开发效率。而 gulp 是当前最热门的任务自动化工具之一，它的插件生态极其丰富，让我们可以更轻松地完成工作。
在使用 gulp 进行任务自动化时，经常需要在 gulpfile.js 中使用一些插件，比如 gulp-sass、gulp-rename 等。而有时候我们会需要得到某个插件执行任务后的文件列表，这时候就可以使用 gulp-using 这个插件。
gulp-using 可以把插件处理后生成的文件路径输出出来，帮助我们更好地理解 gulp 的操作过程并快速定位可能存在的错误。
安装
在使用 gulp-using 之前，需要确保你已经在系统中安装了 gulp 和 node.js。如果还没有安装，可以前往官网下载并且安装。
安装 gulp-using 可以在命令行中执行以下命令：
npm install gulp-using --save
使用方法
在 gulpfile.js 中引入 gulp 和 gulp-using 插件：
const gulp = require('gulp'); const using = require('gulp-using');
接下来，我们可以在某个 task 中使用 gulp-using：
gulp.task('example', function() { return gulp.src('src/*.js') .pipe(using()) // 在这里可以接其他 gulp 插件 .pipe(gulp.dest('dist/')); });
这个例子会选择 src 目录下的所有 .js 文件，然后通过 using() 方法输出文件路径，最后把处理后的文件保存到 dist 目录中。
参数
gulp-using 支持以下参数：
options.verbose：默认为 true，设置为 false 后，使用过程中将不会输出信息；options.prefix：自定义输出的前缀；options.suffix：自定义输出的后缀。
我们可以在传入 using() 方法时传入参数来自定义输出内容，比如：
gulp.task('example', function() { return gulp.src('src/*.js') .pipe(using({ prefix: 'File processed:', verbose: false })) .pipe(gulp.dest('dist/')); });
这个例子会选择 src 目录下的所有 .js 文件，然后通过 using() 方法输出自定义前缀和后缀的文件路径，最后把处理后的文件保存到 dist 目录中。
示例代码
下面是一个完整的 gulpfile.js，包含了使用 gulp-using 的示例。该示例会使用 gulp-sass 编译 scss 文件，使用 gulp-autoprefixer 添加浏览器前缀，并使用 gulp-using 输出编译后的文件路径。
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---- - --------------------- ----- ------------ - ----------------------------- ----- ----- - ---------------------- ------------------- -------- -- - ------ --------------------------------- ----------------------------- --------------- -------------- -- ---------- ---------------------------- -------- --------------------------------- ---展开代码
这个示例会选择 src/styles 目录下的 style.scss 文件，然后通过 sass 编译成 css 文件，使用 autoprefixer 添加浏览器前缀，并使用 using() 输出编译后的文件路径，最后把编译好的文件保存到 dist/styles 目录中。
总结
使用 gulp-using 可以方便地输出插件处理后生成的文件路径，帮助我们更好地理解 gulp 的操作过程。同时，通过设置参数，我们可以自定义输出的内容，从而更好地适应自己的需求。
当我们需要对 gulp 的操作过程进行深入理解以及快速排错时，gulp-using 可以成为我们的得力工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/201592
