使用Gulp.js和globbing模式修改文件(相同的dest)

Question

我有一个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.

如果有一个更简单的方法,我肯定会更加欣赏这个解决方案.谢谢!

Answer 1

正如你所怀疑的那样,你这太复杂了.目标不需要是动态的,因为全局路径也用于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("./"));

Answer 2

这比数字1311407引导的更简单.您根本不需要指定目标文件夹,只需使用..另外,请务必设置基目录.

gulp.src("sass/**/*.scss", { base: "./" })
    .pipe(sass())
    .pipe(gulp.dest("."));

Answer 3

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest(function(file) {
    return file.base;
  }));

最初答案在这里给出:https://stackoverflow.com/a/29817916/3834540.

我知道这个帖子已经老了,但它仍然显示为谷歌的第一个结果,所以我想我也可以在这里发布链接.