javascript - Gulp 自动监视 scss 文件的变化，无需每次都运行 gulp watch

Question

我是这个网站的新手，深感困惑。

我有 2 个文件 - sass/styles.scss，它编译为 ma​​in/styles.css

问题是它不会像它应该自动执行的那样监视更改。当我保存它时，它应该将 scss 编译为 css。

现在，每次我做出改变时，我都必须运行gulp watch，这是压力很大的。

gulpfile.js

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

gulp.task('sass', function(){
return gulp.src('css/sass/styles.scss')
  .pipe(sass()) // Converts Sass to CSS with gulp-sass
  .pipe(gulp.dest('css/main'))
  });

gulp.task('watch', gulp.series('images', 'sass'), function(){
gulp.watch('images/**', ['oimages']);
gulp.watch('css/sass/**/*.scss', ['sass']); 
});

终端

[19:37:02] Starting 'watch'...
[19:37:02] Starting 'images'...
[19:37:04] gulp-imagemin: Minified 0 images
[19:37:04] Finished 'images' after 2.49 s
[19:37:04] Starting 'sass'...
[19:37:04] Finished 'sass' after 20 ms
[19:37:04] Finished 'watch' after 2.52 s

我希望使其成为一个自动过程，而不是每次更改 sass 文件时都运行gulp watch。

Answer 1

带有 watch 指令的函数应该位于gulp.series内:

gulp.task('watch', gulp.series('images', 'sass', function() {
    gulp.watch('images/**', gulp.series('images'));
    gulp.watch('css/sass/**/*.scss', gulp.series('sass'));
  })
);

由于 'images' 和 'sass' 任务可能彼此独立，因此您可以这样做

gulp.series(gulp.parallel('images', 'sass'), function() {...})

或探索 ignoreInitial选项。