使用 gulp 监视和编译多个带有多个 config.rb 文件的 sass 目录

Question

我有一个文件树，大致如下：

sites
 |
 +-- all
 |    |
 |    +-- css/
 |    +-- scss/
 |    -- config.rb
 |
 +-- mysite.com
 |    |
 |    +-- css/
 |    +-- scss/
 |    -- config.rb

这是我的gulpfile（简化）：

'use strict';
var gulp = require('gulp'),
    compass = require('gulp-compass');
gulp.task('compile-css', function() {
    return gulp
        .src("./sites/all/scss/*.scss")
        .pipe(compass({
            config_file: './sites/all/config.rb',
            sass: "./sites/all/scss"
        }))
        .pipe(gulp.dest("sites/all/css"));
});
gulp.task('default', ['watch']);
gulp.task('watch', function() {
    gulp.watch('./sites/wirefly.com/**/*.scss', ['compile-css']);
});

目前，根据/all/config.rb文件中的配置，编译/all/scss/目录中的所有scss文件并将它们转储到/all/css/目录中，这很好。

有没有办法让我 gulp 观看项目中的所有 scss 文件并使用正确的 config.rb 文件进行输出？ 即/all/scss/中的文件将根据/all/config.rb设置进行编译，而/mysite.com/scss/将根据/mysite.com/config.rb设置进行编译。

或者也许只是完全摆脱config.rb文件并利用gulp将文件放在它们应该去的地方？

我可以为 /mysite.com 目录中的 scss 文件编写一个单独的任务，但如果引入更多子目录，这既不优雅也不可扩展。

Answer 1

事实证明，我最终在watch任务的"change"事件中使用了回调，如下所示：

var relativePath;
gulp.task('main-compass', function() {
    return gulp
        .src(relativePath + '/*.scss')
        .pipe(compass({
            config_file: relativePath + "/../config.rb",
            sass: relativePath
        }));
});
gulp.task('default', ['watch']);
gulp.task('watch', function() {
    gulp.watch('./sites/**/*.scss').on('change', function(file) {
        var regexDir = /sites(.*)/g;
        var partialDir = file.path.match(regexDir);
        relativePath = path.dirname(partialDir);
        gulp.run('main-compass');
    });
});

因此，relativePath变量被分配了更改文件的相对路径，然后main-compass任务利用config.rb文件，该文件是更改的 sass 文件的一个目录。

可能有更好的方法可以做到这一点，但这现在可以完成工作。