Gulp只监视主要的scss文件而不是部分文件。

Question

我在设置gulp任务时遇到了问题，无法自动监视我的scss更改。我正在创建一个express应用程序，我的文件夹结构如下:

首先我在终端中运行我的gulp任务gulp watch。基本上，当我添加另一个css条件比如body {height: 25%;}并保存我的partials(部分文件)时，它不会把它转换为css。 它只能使用main.scss文件, 但是对于带有_的(部分scss)，它不起作用。

以下是我的gulpfile.js文件:

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


gulp.task('sass', function () {
    return gulp.src('public/sass/**/*.scss')
        .pipe(sass({ outputStyle: 'compressed' })) // Using gulp-sass
        .pipe(gulp.dest('public/stylesheets'))
});

gulp.task('watch', function () {
    gulp.watch('public/sass/**/*.scss', gulp.parallel('sass', function (done) {
        // do more stuff
        done();
    }))
})

我尝试更改通配符，如 *.scss，**/*.scss，*.+(scss|sass)，但都没有起作用。请帮忙解决。

- bradrar

---

我假设你的所有局部文件都已经导入到main.scss中了？你是说当你修改其中一个局部文件时，“sass”任务没有被触发吗？根据定义，修改导入的局部文件时除了对main.scss进行更改外，不会有任何输出。你的代码没有问题，但我肯定会将“watch”gulp.parallel更改为gulp.series。在这里使用Series更好。 - Mark

好的，让我尝试一下系列。 - bradrar

真是太棒了！现在它可以工作了！谢谢你！ - bradrar

Answer 1

你的代码看起来没问题。你是这样导入所有的部分文件的吗？

main.scss

@import 'auth';
@import 'blog-show';

/* more imports ... */

- d-h-e

---

是的，我在 main.scss 中像那样导入了它。而且，当我在终端中像这样使用 sass sass public/sass:public/stylsheets --watch --style compressed 时，它可以工作并且所有的局部文件都被监视。但是在 gulp 中，它不起作用。 - bradrar

我的问题已经解决。非常感谢！我按照 @Mark 的建议将“.parallel”更改为“.series”。 - bradrar

啊，好的，很好。谢谢你的反馈。 - d-h-e