在前端开发中，文件操作是我们必不可少的一个环节。gulp-recursive-folder 是一个基于 gulp 的 npm 包，能够帮助我们更加方便地对文件夹进行递归处理。在本教程中，我们将介绍如何使用 gulp-recursive-folder。
安装
安装 gulp-recursive-folder 可以使用 npm 命令：
npm install gulp-recursive-folder --save-dev
使用
导入 gulp 和 gulp-recursive-folder
首先，在你的 js 文件中引入 gulp-recursive-folder，和 gulp：
var gulp = require('gulp'); var recursiveFolder = require('gulp-recursive-folder');
递归文件夹
使用 recursiveFolder 方法，可以递归一个文件夹，并对其中的文件进行处理。
gulp.task('processDir', function() { recursiveFolder({ baseFolder: 'src', // 要递归的文件夹 exclude: ['*.png', '*.jpg'] // 要排除的文件后缀 }, function (folderFound) { // 处理找到的文件夹 }); });
处理文件
在处理找到的文件夹时，可以使用 gulp 的插件对文件进行处理：
-- -------------------- ---- ------- ----------------------- ---------- - ----------------- ----------- ------ -------- --------- -------- -- -------- ------------- - -- -------- ------------------------- - -------- --------------- ----------------------------------- --- ---展开代码
这里使用了 gulp-jshint 插件对 js 文件进行了检查，并保存在原文件夹里。
获取文件夹信息
在处理找到的文件夹时，可以获取到文件夹的信息，包括路径：
gulp.task('processDir', function() { recursiveFolder({ baseFolder: 'src', exclude: ['*.png', '*.jpg'] }, function (folderFound) { console.log('Processing', folderFound.path); }); });
这里只是简单地将找到的文件夹路径输出到控制台上。你可以根据情况对文件夹信息进行更详细的处理。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- ------- --- ---- - ---------------- --- --------------- - --------------------------------- --- ------ - ----------------------- ----------------------- ---------- - ----------------- ----------- ------ -------- --------- -------- -- -------- ------------- - ------------------------- ------------------ ------------------------- - -------- --------------- ----------------------------------- --- ---展开代码
在此代码中，会递归 src 文件夹，并排除 png 和 jpg 文件。然后对于每一个找到的文件夹，都会对其中的所有 js 文件进行 jshint 检查，并保存在原文件夹中。
总结
在本教程中，我们介绍了如何使用 gulp-recursive-folder 来递归处理文件夹。希望这篇文章对于初学者能够有所帮助，让你更加方便地进行文件操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa9db5cbfe1ea0610530
