使用path模块时Gulp任务路径错误的原因及解决方法

这个问题我碰到过好几次，核心是Gulp对基准路径（base）的默认处理逻辑，在使用path.join拼接路径时出现了偏差，我来给你拆解清楚：

问题场景回顾 #

先看你给出的两个任务：

1. 正常工作的任务：

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

输出：dist/assets/css/**/*（符合预期，src/css下的文件直接放到目标目录）

2. 使用path.join后出错的任务：

gulp.task('copy', function() { 
  var src = path.join(path1, path2), // src/css/**/*
      dest = path.join(path3, path4); // dist/assets/css
  gulp.src(src).pipe(gulp.dest(dest)); 
});

输出：dist/assets/css/src/css/**/*（不符合预期，整个src/css目录被嵌套到了目标目录里）

错误原因 #

问题出在Gulp的gulp.src()默认识别base的规则上：

• 当你直接写gulp.src('src/css/**/*')时，Gulp会自动把glob模式中第一个通配符（**）之前的路径（也就是src/css）当成基准路径。复制文件时，它会去掉这个base前缀，只把src/css下面的内容放到目标目录。
• 但用path.join拼接路径时，哪怕最终生成的src看起来和直接写的一样（比如./src/css/**/* vs src/css/**/*），Gulp可能会把**当前工作目录（.）**识别为默认base。这时候，它会保留文件相对于当前目录的完整路径（比如src/css/style.css），然后把这个完整路径拼接到dest后面，就出现了多余的src/css嵌套。

简单说：Gulp没认出你要以src/css为基准，而是把整个项目根目录当成了基准，所以复制时带上了完整的相对路径。

修复方法 #

你想到的给gulp.src()设置base选项是完全正确的，这里有两种实用的实现方式：

方式1：硬编码指定base（适合路径固定的场景） #

直接告诉Gulp基准路径是src/css，强制它去掉这个前缀再复制：

gulp.task('copy', function() {
  var src = path.join(path1, path2),
      dest = path.join(path3, path4);
  // 显式设置base参数
  gulp.src(src, { base: 'src/css' })
      .pipe(gulp.dest(dest));
});

方式2：动态生成base（适合路径动态配置的场景） #

如果你的path1、path2是从配置文件读取的动态变量，可以用path.join先拼出基准路径，再传给base选项，避免硬编码：

gulp.task('copy', function() {
  // 先拼出基准路径：src/css
  var basePath = path.join(path1, 'css'),
      // 再拼出完整的glob路径：src/css/**/*
      src = path.join(basePath, '**/*'),
      dest = path.join(path3, path4);
  
  gulp.src(src, { base: basePath })
      .pipe(gulp.dest(dest));
});

这样修改后，Gulp就会正确识别基准路径，把src/css下的文件直接复制到dist/assets/css中，不会再出现多余的路径嵌套。

内容的提问来源于stack exchange，提问作者Sergey Babakov