sass - 当依赖/子(@import)更改时，gulp 编译所有父 sass 文件

Question

我有一个相当大的代码库，其中有多个共享通用 sass 模块的项目。

我还为运行多个任务的每个模块设置了相当复杂的 gulpfiles。

我遇到的一个问题是，当更新单个共享 sass 模块时，能够在多个项目上运行 sass 任务。

例如:

Project 1 file.scss
   @import "shared-child.scss"

Project 2 file.scss
   @import "shared-child.scss"

Project 3 file.scss
       @import "shared-child.scss"

这种情况经常发生。当我更新 shared-child.scss 时，我希望重新编译包含 shared-child.scss 的所有项目文件。

因此，当我在 shared-child.scss 上运行 gulp sass 任务时，它会依次知道它包含在各个项目(即项目 1、项目 2、项目 3)中的位置并运行他们适当的 gulp 任务包括对 shared-child.scss 所做的更改。

从右边开始，我在项目 gulp.watching 所有包含的文件中都有父文件以进行更改，但反之亦然，这就是问题所在。更新子级并让父级重新编译。

任何有关如何实现这一目标的信息将不胜感激。

Answer 1

不完全是你想要的，但我用它来避免部分/包含/子项被单独解析。

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

gulp.task('styles', function () {
    return gulp.src('app/css/**/*.scss')
        .pipe(filter(noPartials))//avoid compiling SCSS partials
        .pipe(sass())
        .pipe(gulp.dest('dist'));
});

您应该监视所有文件，包括部分文件，以便在它们发生更改时触发任务。

gulp.task('watch', function() {
  gulp.watch('app/css/**/*.scss', ['styles']); //watch ALL the SCSS files
});

部分内容由文件名或包含文件夹名称开头的 _ 识别。

var noPartials = function (file) {
    var path         = require('path');
    var dirSeparator = path.sep.replace('\\', '\\\\');
    var relativePath = path.relative(process.cwd(), file.path);
    return !new RegExp('(^|'+dirSeparator+')_').test(relativePath);
};

唯一的缺点是，当任何 SCSS 文件发生更改时，所有 非部分文件都会被渲染。

---

附注:I made exactly what you asked ，但对于 Jade(html 模板语言)，使用一个插件来计算依赖关系树/图。因此，如果有人找到一种为 SASS 文件构建树的方法，这是可能的