使用 Gulp.js 和通配模式就地修改文件（相同目标）

我有一个 gulp 任务，尝试将 .scss 文件转换为 .css 文件（使用 gulp-ruby-sass），然后将生成的 .css 文件放入与原始文件相同的位置。问题是，由于我使用的是通配模式，因此我不一定知道原始文件的存储位置。

在下面的代码中，我尝试使用 gulp-tap 进入流并找出从中读取流的当前文件的文件路径：

gulp.task('convertSass', function() {
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t){
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        }))
        .pipe(gulp.dest(fileLocation));
});

基于的输出console.log(fileLocation)，这段代码看起来应该可以正常工作。然而，生成的 CSS 文件似乎放置在比我预期高一级的目录中。它应该在哪里project/sass/partials，结果文件路径就是project/partials.

如果有一种更简单的方法可以做到这一点，我肯定会更加欣赏该解决方案。谢谢！

正如您所怀疑的那样，您使事情变得太复杂了。目的地不需要是动态的，因为通配路径用于dest以及。只需通过管道连接到您从中获取 src 的同一基本目录，在本例中为“sass”：

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

如果您的文件没有共同的基础并且您需要传递路径数组，那么这已经不够了。在这种情况下，您需要指定基本选项。

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));