在前端开发中，自动化构建工具是必不可少的工具，其中 gulp 在众多构建工具中应用广泛。gulp 相比于其他构建工具有着简单易用又灵活的优点，同时 npm 上也有众多的 gulp 插件，比如 gulp-print。

gulp-print 可以帮助我们在终端输出当前处理的文件路径，有着非常方便的作用，下面将详细介绍 gulp-print 的使用方法。

安装 gulp 和 gulp-print

使用 gulp-print 之前，我们需要先安装 gulp 和 gulp-print 两个 npm 包。可以全局安装也可以在当前项目中安装。

全局安装：

npm install -g gulp gulp-print

安装在当前项目中：

npm install --save-dev gulp gulp-print

使用 gulp-print

在使用 gulp-print 之前，需要先导入 gulp 和 gulp-print 包。

const gulp = require('gulp');
const print = require('gulp-print');

在 gulp 任务中调用 print 函数即可输出当前处理的文件路径，下面是一段示例代码：

gulp.task('default', function() {
  return gulp.src('src/**/*.js')
             .pipe(print())
             .pipe(gulp.dest('dist'));
});

上面的代码会在终端输出当前处理的 js 文件路径，如下所示：

[src/js/app.js] -> /Users/yourname/www/dist/js/app.js

如果需要更加详细的信息，可以传入一个字符串，如下所示：

gulp.task('default', function() {
  return gulp.src('src/**/*.js')
             .pipe(print(filepath => `file: ${filepath}`))
             .pipe(gulp.dest('dist'));
});

上面的代码会在终端输出当前处理的 js 文件路径和文件名，如下所示：

[file:/Users/yourname/www/src/js/app.js] -> /Users/yourname/www/dist/js/app.js

总结

通过本文的介绍，相信大家已经熟悉了 gulp-print 的使用方法和技巧。gulp-print 可以帮助我们方便的输出当前处理的文件路径，对于大型项目的构建过程更是必不可少。

希望本文能够给大家带来帮助，让大家更好地了解 gulp-print 的使用方法，同时也希望大家能够在实际项目中灵活运用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66055