npm 包 gulp-copy 使用教程

什么是 gulp-copy

gulp-copy 是一个基于 Gulp 的插件，它能够自动复制指定的文件或目录。通过 gulp-copy，你可以快速地将指定的文件从一个文件夹复制到另一个文件夹，而不需要手动操作。

安装 gulp-copy

使用 npm 安装 gulp-copy：

npm install gulp-copy --save-dev

安装完毕后，在 Gulpfile.js 中引用 gulp-copy：

const copy = require('gulp-copy');

使用 gulp-copy

gulp-copy 的基本使用方法如下：

gulp.src('src/**/*')
    .pipe(copy(dest));

其中，src 为源文件夹，可以使用通配符匹配要复制的文件或目录；dest 为目标文件夹，指定复制后的文件或目录所在的位置。

例如，如果你想将 src 目录下的所有文件和子目录都复制到 dist 目录下：

gulp.task('copy', function(){
  return gulp.src('src/**/*')
      .pipe(copy('dist'));
});

复制指定类型的文件

通常情况下，我们只需要复制某一类文件，而不是所有文件。在 gulp-copy 中，可以使用文件类型过滤器对指定类型的文件进行筛选。

例如，如果你只想复制 src 目录下的所有 .html 文件到 dist 目录下：

gulp.task('copy', function(){
  return gulp.src('src/**/*.html')
      .pipe(copy('dist'));
});

复制指定目录

在有些情况下，我们只需要复制指定的文件夹或文件，而不是整个项目目录。gulp-copy 可以使用绝对路径或相对路径指定要复制的文件夹或文件。

例如，如果你只想复制 src 目录下的 lib 文件夹和 index.html 文件到 dist 目录下：

gulp.task('copy', function(){
  return gulp.src(['src/lib/**/*', 'src/index.html'])
      .pipe(copy('dist'));
});

嵌套目录层级保持一致

在复制目录时，为了保持源文件夹的文件目录结构，我们可以使用 {base: 'src'} 选项。例如，如果你想桉源目录结构复制所有文件到 dist 目录下：

gulp.task('copy', function(){
  return gulp.src('src/**/*', {base: 'src'})
      .pipe(copy('dist'));
});

复制前进行修改

在复制文件前，我们可能需要对源文件做一些修改（比如文件压缩、重命名、添加前缀等）。这可以通过 Gulp 中的其他插件单独完成。例如，如果你想在复制前将所有 .js 文件进行压缩并添加前缀：

const uglify = require('gulp-uglify');

gulp.task('copy', function(){
  return gulp.src(['src/**/*.js'])
      .pipe(uglify())
      .pipe(gulp-rename({suffix: '.min'}))
      .pipe(copy('dest'));
});

结论

gulp-copy 是一个非常有用的 Gulp 插件，能够帮助我们自动复制指定的文件或目录。通过学习本文所述的 gulp-copy 使用方法，你可以在前端开发中节省大量时间。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66294