gulp编译所有父sass文件当一个依赖/子(@import)被改变时

yhxst69z 于 2022-12-08 发布在 Gulp

关注(0)|答案(2)|浏览(164)

我有一个相当大的代码库，其中包含多个共享公共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项目中。观察所有包含的文件是否有变化，但问题是，更新子文件并重新编译父文件。
如能提供关于如何做到这一点的任何资料，将不胜感激。

gulp

来源：https://stackoverflow.com/questions/25171132/gulp-compile-all-parent-sass-files-when-a-dependent-child-import-is-changed

2条答案

按热度按时间

gmol16391#

不完全是你想要的，但我用它来避免partials/include/children被单独解析。

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文件更改时，* 所有 * 非部分文件都将呈现。
作为旁注：我完全按照你的要求做了，但是对于Jade（html模板语言），使用了一个插件来计算依赖树/图。所以 * 这是 * 可能的，如果有人找到一种方法来为SASS文件构建依赖树

赞(0）回复(0）举报 2022-12-08

watbbzwu2#

可以使用gulp-dependents或gulp-sass-parent来完成。第一个应该更好，因为它允许在scss中配置和处理@use或@forward规则。

赞(0）回复(0）举报 2022-12-08