使用 Gulp.js 和 globbing 模式就地修改文件(相同的目标)

问题描述

我有一个 gulp 任务，它试图将 .scss 文件转换为 .css 文件(使用 gulp-ruby-sass)，然后将生成的 .css 文件放到它找到原始文件的同一位置.问题是，由于我使用的是通配模式，我不一定知道原始文件的存储位置.

I have a gulp task that is attempting to convert .scss files into .css files (using gulp-ruby-sass) and then place the resulting .css file into the same place it found the original file. The problem is, since I'm using a globbing pattern, I don't necessarily know where the original file is stored.

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

In the code below I'm trying to use gulp-tap to tap into the stream and figure out the file path of the current file the stream was read from:

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.

Based on the output of the console.log(fileLocation), this code seems like it should work fine. However, the resulting CSS files seem to be placed one directory higher than I'm expecting. Where it should be project/sass/partials, the resulting file path is just project/partials.

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

If there's a much simplier way of doing this, I would definitely appreciate that solution even more. Thanks!

推荐答案

正如你所怀疑的，你把这弄得太复杂了.目的地不需要是动态的，因为全局路径也用于 dest.只需通过管道连接到您从中获取 src 的同一基本目录，在本例中为sass":

As you suspected, you are making this too complicated. The destination doesn't need to be dynamic as the globbed path is used for the dest as well. Simply pipe to the same base directory you're globbing the src from, in this case "sass":

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

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

If your files do not have a common base and you need to pass an array of paths, this is no longer sufficient. In this case, you'd want to specify the base option.

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

这篇关于使用 Gulp.js 和 globbing 模式就地修改文件(相同的目标)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！