在前端开发中，我们经常需要迭代某个目录下的所有文件进行处理，例如压缩、合并、重命名等操作。Gulp 是一个流式构建工具，可以帮助我们方便地实现这些任务。
创建任务
首先，我们需要创建一个 Gulp 任务来迭代目录。使用 gulp.task() 方法创建一个任务，然后在任务中定义一个函数来处理文件。例如，以下代码将遍历 ./src 目录下的所有文件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- -------- - --------------------
-------------------- -------- -- -
------ ------------------------
--------------------------- ------ ---- --- -
----------------------------------- ------------
-------- ------
----
---这个任务会输出 ./src 目录下所有文件的相对路径。
遍历目录
通常情况下，我们需要对指定目录及其子目录下的所有文件进行处理。使用 gulp.src() 方法可以匹配指定模式的文件，并返回一个 Vinyl 对象流。gulp.src() 支持 glob 模式，例如 **/*.* 表示匹配任意深度的所有文件。接着，我们可以使用 through2 模块来遍历每个文件对象，through2.obj() 方法创建一个可读写的流，接受三个参数：file 表示当前文件对象，enc 表示编码（默认为 utf8），cb 表示回调函数。
在遍历过程中，我们可以对文件进行任意操作。例如，以下代码将所有 CSS 文件压缩并重命名：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------
----- -------- - --------------------
----- --------- - --------------------------
----- ------ - -----------------------
----------------------- -------- -- -
------ --------------------------
------------------
-------------- ------- ------ ---
---------------------------
---这个任务会遍历 ./src 目录及其子目录下的所有 CSS 文件，并压缩、重命名后保存到 ./dist 目录下。
总结
使用 Gulp 迭代目录可以方便地实现前端开发中常用的文件处理操作。通过本文的介绍，您已经了解了如何创建任务、遍历目录以及对文件进行操作。希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31091