Gulp 4 查看所有 sass 文件，编译一个答案

【问题标题】：Gulp 4 watch all sass files, compile oneGulp 4 查看所有 sass 文件，编译一个
【发布时间】：2019-11-09 19:36:20
【问题描述】：

我的文件结构是：

sass
-main.sass
-variables.sass
-containers.sass
-buttons.sass
-helpers.sass

css
-main.css

在我的 main.sass 文件中，我正在导入所有其他 sass 文件：

@import "variables";
@import "containers"; 
@import "buttons"; 

//etc...

在 gulp 中，我想查看任何更改的 scss 文件并仅将 main.sass 编译成 main.css。

这就是我所拥有的：

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

function styles() {
  return gulp.src('sass/main.sass', {
    sourcemaps: true
  })
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('css/'));
}

function watch() {
  gulp.watch('sass/**/*.sass', styles);
}

var build = gulp.parallel(styles, watch);

gulp.task(build);
gulp.task('default', build);

文件正在被监视，但是当我更新一个时，main.css 文件没有更新。

【问题讨论】：

标签： npm sass gulp gulp-watch

【解决方案1】：

我相信您的问题之一可能是您通过 gulp.watch(...) 定义了一个监视任务，但它的引用丢失了，因此它永远不会被调用。但是，我真的不明白您通过调用parallel() 试图达到什么目的。我目前正在使用如下构建脚本处理类似的用例：

var gulp = require('gulp');

function styles() {
    return gulp.src('...')
        .pipe(...)
        .pipe(gulp.dest('...'));
}

exports.build = gulp.watch('...', styles);

这应该是一个最小的工作示例，只需调用gulp build。

【讨论】：