使用多Glob模式时Gulp.dest()的功能异常问题咨询

看起来你是想把编译后的CSS文件放到对应Less文件所在目录的同级css文件夹里（比如把./clients/my-client/assets/less/style.less编译后输出到./clients/my-client/assets/css/style.css），但当前的gulp.dest写法有问题，我来帮你理清楚：

问题出在哪？ #

你现在用path.join(file.path, '../css')，而file.path是文件的完整路径（比如./clients/my-client/assets/less/style.less），拼接后会变成./clients/my-client/assets/less/style.less/../css，最终实际路径是./clients/my-client/assets/less/css——相当于把CSS文件夹建在了less目录里，这显然不是你想要的结果。

正确的写法 #

你需要基于文件所在的目录来构建输出路径，而不是文件本身的路径，这里有两种稳妥的方式：

方式一：利用file.dirname直接替换目录

file.dirname是当前Less文件所在的目录（比如./clients/my-client/assets/less），我们只需要把这个目录里的less替换成css即可：

.pipe(gulp.dest(function(file) {
  // 替换目录中的less为css，简单直接
  return file.dirname.replace('/less', '/css');
}));

方式二：用path模块更严谨地处理路径

如果担心路径分隔符的问题（比如Windows下是\），可以用path模块来逐级处理：

.pipe(gulp.dest(function(file) {
  // 先拿到less目录的上级目录（也就是assets）
  const assetsDir = path.dirname(file.dirname);
  // 再拼接css目录
  return path.join(assetsDir, 'css');
}));

额外优化：结合base配置简化路径

你已经设置了base: process.cwd()，也可以通过file.relative获取相对于项目根目录的路径，再替换其中的less部分：

.pipe(gulp.dest(function(file) {
  const relativePath = file.relative;
  // 把路径中的/assets/less/替换成/assets/css/
  const cssPath = relativePath.replace('/assets/less/', '/assets/css/');
  return path.join(process.cwd(), cssPath);
}));

把上面任意一种写法替换你原来的gulp.dest回调，就能正确把编译后的CSS输出到对应客户端的assets/css目录下了。

内容的提问来源于stack exchange，提问作者Thomas Huxley