css - Gulp sass compile 只改变了改变文件的文件夹

Question

已经问了很多关于这个的问题，但不幸的是，没有一个能解决我的问题......

在办公室，我们有一个自定义的 PHP 框架和一些在 vagrant box 中运行的应用程序。很久以前就定义了一条关于 SCSS 文件的规则。它们位于“scss”文件夹中，并在 ../中编译(大多数情况下是 css 文件夹)。我们使用 npm 和 gulp-sass 以及 gulp-autoprefixer 来做到这一点。

示例:foo/bar/css/scss/foo.scss --> foo/bar/css/foo.css

问题是在我们的框架中，我们没有一个通用的“dest”文件夹，所以 watch 目前是这样的:

framework/**/scss/**/*.scss

我们在框架中有多个子模块，scss 文件夹有多个可能的路径，例如:

• fw/submodule/_www/css/foo/bar/scss/
• fw/submodule/subsubmodule/_www/css/foo/bar/fooagain/scss/
• fw/submodule/views/tpl/library/libraryname/default/css/foo/bar/scss/

等...

所以为了在正确的地方编译，我们使用gulp-rename(文件夹var是FW的名称)在祖先文件夹中编译。

gulp.task('sass', () => {
    return gulp.src([folder+'**/scss/**/*.scss'])
        .pipe(plumber())
        .pipe(sass(sassOptions))
        .pipe(autoprefixer(autoprefixerOptions))
        .pipe(rename((filePath) => {
            filePath.dirname = filePath.dirname.replace("scss", "");
        })).pipe(gulp.dest(folder));
});

问题是:当您保存 scss 文件时，它会编译 ~200 个文件。这。是。所以。长。

完整编译需要 8 到 20 秒。

在我们的预生产服务器中，我们有一个 bash，当您保存一个文件时，它会运行并编译所有同级 scss 文件。但是我没能用 gulp 做到这一点。

我的愿望是:改一个scss文件，我们编译他和他的 sibling 。不是每一个 scss 文件。你觉得有可能吗？

非常感谢。

Answer 1

您可以在 gulpfile 中创建函数，为每个“组”scss 文件提供特定任务。像这样

function compileStylesTask(taskName, srcFiles, distFolder, compiledFileName) {
    gulp.task(taskName, function () {
        var style = gulp.src(srcFiles)
            .pipe(sass().on('error', sass.logError))
            .pipe(rename({basename: compiledFileName}))
            .pipe(gulp.dest(distFolder))
        return merge(style);
    });
}

compileStylesTask('someCustomCssTask', [
    'src/css/some.scss',
    'src/css/some2.scss'
], 'someCompiledName', '/dist/css');

在你的 watch 任务中，你现在可以像这样分别为每个组添加 watch

gulp.task('watch', function () {
    gulp.watch('/src/scss/some.scss', ['someCustomCssTask']);
});

这将仅触发此特定的 scss 任务运行。