2

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

我还为每个运行多个任务的模块设置了非常复杂的 gulpfile。

我遇到的一个问题是在更新单个共享 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 中有父文件。监视所有包含的文件以进行更改，但反之亦然是问题所在。更新孩子并让父母重新编译。

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

4

1 回答 1

5

Not exactly what you want but I'm using this to avoid partials/includes/children from being parsed separately. 

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'));
});

You should watch all the files, including partials, so that the task is triggered when they change too.

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

Partials are recognized by the _ at the beginning of the filename or containing folder's name.

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);
};

The only downside to this is that all the non-partials files will be rendered when any SCSS file changes.

As a side note: I made exactly what you asked, but for Jade (html templating language), using a plugin that figures out the dependency tree/graph. So it is possible, if someone find a way to build that tree for SASS files

于 2014-11-23T13:17:26.930 回答