如何使用Gulp复制多个文件并保持文件夹结构

在Gulp中，要复制多个文件并保持其文件夹结构，我们可以使用 gulp.src来指定要复制的文件，gulp.dest来指定目标文件夹。这里是一个具体的步骤和实例说明如何实现这一点：

1. 安装Gulp

首先，确保您已经在项目中安装了Node.js和npm。然后可以通过npm安装Gulp和Gulp的文件操作插件。打开终端或命令提示符，运行以下命令安装Gulp CLI和Gulp：

bash
npm install --global gulp-cli
npm install --save-dev gulp

2. 创建Gulp任务

在项目根目录下，创建一个名为 gulpfile.js的文件，这个文件将包含Gulp的任务定义。以下是一个简单的任务定义，用于复制文件并保持文件夹结构：

javascript
const gulp = require('gulp');

// 创建一个名为 'copy-files' 的任务
gulp.task('copy-files', function () {
    // `gulp.src` 用于选择要处理的文件，这里使用通配符 '**' 匹配所有文件，'!node_modules/**' 排除 node_modules 目录
    return gulp.src(['src/**/*', '!node_modules/**'], { base: 'src' })
        // `gulp.dest` 用于指定输出目录
        .pipe(gulp.dest('dist'));
});

在这个例子中，我们使用了 src/**/*来选择 src目录下所有的文件和文件夹，{ base: 'src' }确保了文件在复制过程中保持原来的文件夹结构。所有选中的文件将被复制到 dist目录。

3. 运行Gulp任务

在终端或命令提示符中，运行下面的命令来执行我们定义的 copy-files任务：

bash
gulp copy-files

这条命令会触发 copy-files任务，它会将 src目录下的所有文件和文件夹（除了 node_modules目录）复制到 dist目录，同时保持原有的目录结构。

例子说明

假设我们有以下的文件结构：

shell
/project
  /src
    /images
      logo.png
    /scripts
      app.js
    index.html

运行上述Gulp任务后，dist目录将会包含：

shell
/dist
  /images
    logo.png
  /scripts
    app.js
  index.html

这就是使用Gulp复制文件并保持文件夹结构的一个基本例子。这种方法对于项目构建和部署非常有用，能够快速地将开发文件迁移到生产目录。