带有通配符的 Gulp SASS 监视命令目标路径

Question

我在许多目录中的 SASS (SCSS) 文件上都有一个 gulp watch 命令（每个目录都是一个单独的项目）

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('**/Masters/**/assets/scss/*.scss')
  .pipe(sass({
    outputStyle: 'compressed'
  }).on('error', sass.logError))
  .pipe(gulp.dest('**/Masters/**/assets/css'));
})

gulp.task('sass:watch', function () {
  gulp.watch('**/Masters/**/assets/scss/*.scss', ['sass']);
});

我坚持动态指定目标路径。我想在父目录上运行 1 个监视命令，然后监视每个子目录的更改，如果有更改编译 sass 并将 css 文件移动到每个项目文件夹中的 css 目录。

我现在拥有的代码正在按要求监视每个目录，但目标无法按预期工作，该命令创建一个名为 ** 的目录，而不是使用 ** 作为通配符。

有人知道如何动态指定目标路径吗？

Answer 1

您需要将gulp.src和dest中的base设置为当前目录。这将使用输入目录作为输出。

然后使用gulp-rename将../css添加到目录路径。这会将输出定向到与输入目录同级的 cssdir。

gulp.task('sass', function(){
  gulp.src('**/Masters/**/assets/scss/*.scss', {base: "./"})
  .pipe(sass({
    outputStyle: 'compressed'
  }).on('error', sass.logError))

  .pipe(rename(function (path) {
    path.dirname += "/../css";
  }))

  .pipe(gulp.dest('./'));
})