在前端开发中，我们经常需要对文件进行打包、压缩等操作。Gulp.js 是一个非常流行的自动化构建工具，可以方便地实现这些操作。有时候，我们需要将处理过的文件保存到多个目的地，比如同时将 CSS 文件保存到 dist/css 和 tmp/css 目录下。本文将介绍如何在 Gulp.js 中实现这一功能。
使用 gulp-multi-dest 插件
gulp-multi-dest 是一个 Gulp.js 插件，可以将处理过的文件保存到多个目的地。我们可以通过 npm 安装该插件：
npm install --save-dev gulp-multi-dest
安装完成后，我们在 Gulp.js 任务中引入该插件，并使用 multiDest 方法来指定要保存到的多个目的地，示例代码如下：
const gulp = require('gulp');
const multiDest = require('gulp-multi-dest');
gulp.task('css', function () {
return gulp.src('src/css/*.css')
.pipe(multiDest(['dist/css', 'tmp/css']));
});上述代码实现了将 src/css 目录下的所有 CSS 文件保存到 dist/css 和 tmp/css 目录下的功能。其中，multiDest 方法接受一个数组作为参数，数组中的每个元素都是要保存到的目的地路径。
自定义 Gulp.js 插件
除了使用第三方插件外，我们还可以自己编写一个 Gulp.js 插件来实现将文件保存到多个目的地的功能。下面是一个示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------- ---------------- -
------ ------------------ ------ -
---------------------- ------ -
------------------- - ----------- ---- -------------------------
---
------ ----------
---
-
---------------- -------- -- -
------ -------------------------
---------------------------- -------------
---上述代码中，我们定义了一个 multiDest 函数，该函数接受一个要保存到的目的地路径数组作为参数。在 multiDest 函数中，我们使用 gulp.dest 方法来指定要保存到的目的地，并遍历目的地路径数组，为每个目的地都执行一次 gulp.dest 方法。
总结
本文介绍了两种在 Gulp.js 中实现将文件保存到多个目的地的方法：使用 gulp-multi-dest 插件和自定义 Gulp.js 插件。这些方法都可以满足我们的需求，具体使用哪种方法取决于个人喜好和项目需求。通过本文的学习，我们可以有效提高前端开发效率，实现更加便捷的构建流程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13823