使用 gulp 观察和编译具有多个 config.rb 文件的多个 sass 目录答案

【问题标题】：Watching and compiling multiple sass directories with multiple config.rb files with gulp使用 gulp 观察和编译具有多个 config.rb 文件的多个 sass 目录
【发布时间】：2016-06-27 08:22:02
【问题描述】：

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

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 文件编写一个单独的任务，但这并不优雅或可扩展，如果引入更多子目录的话。

【问题讨论】：

标签： sass gulp build-process compass-sass

【解决方案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 文件的上一级目录。

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

【讨论】：