Gulp 是一个前端构建工具，它可以帮助我们自动化处理一些繁琐的任务，如压缩、合并、编译等。在 Gulp 的任务中，我们通常会指定一个源文件夹和一个目标文件夹，然后 Gulp 会自动将源文件夹中的文件处理后输出到目标文件夹中。
但是有时候，我们需要在一个任务中处理多个源文件夹，并且将它们分别输出到不同的目标文件夹，这该怎么办呢？本文将介绍如何在 Gulp 任务中使用多个源和多个目的地。
使用 gulp-multi-dest 插件
要实现多个源和多个目的地的功能，我们可以使用 gulp-multi-dest 插件。这个插件可以让我们在一个任务中同时输出到多个文件夹。
首先，我们需要安装 gulp-multi-dest 插件：
npm install gulp-multi-dest --save-dev
接着，在 Gulp 任务中使用 gulp-multi-dest 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ----------------------
----- --------- - ---------------------------
------------------ -------- -- -
----- ------- - ------------- -------------
----- ----- - ---------- ----------
------ -----------------
------------------------ ------ -
----- --------- - --------------------- ------ -
------ --------------------- ---- - -------------- - --
---
------ ----------
----
---在上面的代码中，我们定义了两个源文件夹 src1 和 src2，以及两个目标文件夹 dest1 和 dest2。然后，我们使用 gulp.src() 方法读取所有的源文件，并使用 gulp-multi-dest 插件将它们分别输出到不同的目标文件夹中。
其中，multiDest() 方法接受一个回调函数作为参数，这个回调函数会在每次文件处理时被调用，用于决定当前文件应该输出到哪些目标文件夹中。在这个回调函数中，我们使用 multimatch() 函数来判断当前文件是否应该输出到某个目标文件夹中。
示例
假设我们有如下的文件结构：
├── src1 │ ├── a.js │ └── b.css ├── src2 │ ├── c.js │ └── d.css ├── dest1 └── dest2
我们想要将 src1 中的 .js 文件和 src2 中的 .css 文件输出到 dest1 文件夹中，同时将 src2 中的 .js 文件和 src1 中的 .css 文件输出到 dest2 文件夹中。
我们可以使用以下的 Gulp 任务：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------- - ----------------------
----- --------- - ---------------------------
------------------ -------- -- -
----- ------- - ---------------- -----------------
----- ----- - ---------- ----------
------ -----------------
------------------------ ------ -
----- --------- - --------------------- ------ -
------ --------------------- ---- - -------------- - --
---
------ ----------
----
---运行这个任务后，我们会得到如下的文件结构：
-- -------------------- ---- -------
--- ----
- --- ----
- --- -----
--- ----
- --- ----
- --- -----
--- -----
- --- ----
--- -----
--- -----
--- ----
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29070