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文件构建该树的方法，可能

当一个依赖/子（@import）被更改时，gulp编译所有父sass文件

1 个答案: