在前端开发过程中，经常需要批量处理文件。例如，对于一个项目中的所有图片，我们可能需要将它们进行压缩、转换格式等操作。这时候，我们就需要一个工具来自动化这个过程。gulp 是一个非常流行的前端构建工具，它支持各种各样的插件，其中就包括 gulp-each 这个能够帮助我们批量处理文件的插件。本文将介绍如何使用 gulp-each 插件，并且提供相应的示例代码。
什么是 gulp-each
gulp-each 是一个可以让我们对所指定的文件进行批量处理的 gulp 插件。与其他 gulp 插件不同的是，它支持对所处理的文件进行拆分或分组操作，因此我们可以将多个操作分别施加到不同的文件上。使用 gulp-each，我们可以轻松地处理多个文件，同时避免代码冗余。
如何安装 gulp-each
首先，我们需要安装 gulp-each 插件。打开终端，进入项目目录，执行以下命令即可：
npm install gulp-each
安装完成后，我们就可以在 gulpfile.js 中引入 gulp-each 插件了。
const gulp = require('gulp');
const gulpEach = require('gulp-each');这样，我们就可以使用 gulpEach 对文件进行批量处理。
如何使用 gulp-each
接下来，我们来看一下如何使用 gulp-each 进行批量处理。首先，我们需要定义要处理的文件路径，并将其存储在一个数组中。例如：
const imgPaths = [ 'images/*.jpg', 'images/*.png' ];
这里，我们使用了 * 通配符，表示任意数量的字符，这样就能匹配到所有的 .jpg 或 .png 文件。
然后，我们可以定义要进行的任务，例如压缩图片：
-- -------------------- ---- -------
-------- ------------- -
------ ------------------
----------------------- --------- ----- --------- -
-- ------
------ ------------------ ----------
----
-
-------- ------------------ --------- -
-- ------
-在处理每个文件时，我们可以使用一个回调函数 callback 来通知 gulp-each 处理完成。如果不需要进行处理，我们可以直接返回空，例如：
function compressImg() {
return gulp.src(imgPaths)
.pipe(gulpEach(function (content, file, callback) {
// 不对文件进行处理
return callback();
}));
}除了使用 * 通配符来匹配多个文件，我们还可以使用其他的匹配规则。例如，如果我们要匹配所有的 .js 文件，但是不包括包含 debug 字符串的文件，我们可以这样写：
gulp.src(['scripts/**/*.js', '!scripts/**/*debug*.js'])
其中，! 表示排除匹配到的文件。
示例代码
完整的示例代码如下所示。在这个例子中，我们定义了三个任务：compressImg、copyCss 和 combineJs，分别对应图片压缩、CSS 复制和 JS 合并。
-- -------------------- ---- -------
----- ---- - ----------------
----- --- - ---------------
----- -------- - -------------------------
----- --------- - ---------------------------
----- ------ - -----------------------
----- -------- - ---------------------
----- -------- - -
---------------
--------------
--
----- -------- - ---------------
----- ------- - -
-------------------
---------------
------------------------
--
-------- ------- -
------ --------------
-
-------- ------------- -
------ ------------------
----------------------- --------- ----- --------- -
------ ------------------ ----------
----
-
-------- ------------------ --------- -
-------------------
-----------------
-------------------------------
---------- -------- -- -
-----------
---
-
-------- --------- -
------ ------------------
------------------
--------------------------------
-
-------- ----------- -
------ -----------------
-----------------------
---------------------------------
-
------------- - ------
--------------- - ------------------ -------------------------- -------- ------------在终端中执行以下命令，即可运行上述三个任务：
gulp
我们看到，gulp-each 插件让我们能够轻松地对多个文件进行批量处理，从而减少代码冗余，提高效率。希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63636