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

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

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

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

lib1，其中@imports partials p1和p2
lib2，其中@imports partials p2和p3

如果我修改部分p1，我只想更新lib1。

如果我修改部分p3，我只想更新lib2。

如果我修改部分p2，我希望更新lib1和lib2。

当前设置会更新我在任何*.scss来源中进行的每次修改的库。

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

谢谢！

Answer 1

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

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

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

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

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

1 个答案: