Gulp sass只编译已更改的已更改文件的文件夹

Question

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.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文件被改变，我们编译他和他的兄弟姐妹。不是每一个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');

在监视任务中，您现在可以为每个组单独添加监视，如下所示

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

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