设置 gulp-sass 像 sass --watch 一样工作

Question

我正在尝试将项目迁移到 gulp-sass 工作流程。在线阅读了一些教程后，我设置了一个非常基本的 gulpfile：

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat');

gulp.task('styles', function() {
  return gulp.src('scss/*.scss')
    .pipe(sass({
      'sourcemap=none': true
    }))
    .pipe(gulp.dest('css/'))
});

gulp.task('watch', function() {
    gulp.watch('scss/**/*.scss', ['styles']);
});

我想从每个不以下划线开头的*.scss 文件生成一个*.css 文件。

我的问题：使用当前的 gulpfile，gulp 将检测 .scss 文件的更改并重建所有库，而不是仅构建受更改影响的库。

例如，我的项目中有 2 个库：

• lib1，其中@imports 部分是p1 和p2
• lib2，其中@imports 部分是p2 和p3

如果我编辑部分p1，我只想更新lib1。

如果我编辑部分p3，我只想更新lib2。

如果我编辑部分p2，我希望同时更新lib1 和lib2。

当前设置会在我在任何 *.scss 源中进行的每次编辑时更新这两个库。

换句话说，我希望 gulp-sass 的行为方式与 sass --watch 相同。这可能吗？怎么样？

谢谢！

Answer 1

目前您的目标是监视任务中的所有 scss 文件：

gulp.watch('scss/**/*.scss', ['styles']);

您可以将其缩小到子文件夹或特定文件。您可以将监视任务分解为 2 个部分，例如：

gulp.watch('scss/p1/**/*.scss', ['stylesP1', 'stylesP2']);
gulp.watch('scss/p2/**/*.scss', ['stylesP2', 'stylesP3']);

然后创建2个样式任务来匹配：

gulp.task('stylesP1', function() { /* Your task actions */ });
gulp.task('stylesP2', function() { /* Your task actions */ });
gulp.task('stylesP3', function() { /* Your task actions */ });