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

你的手表指令的功能应该在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 选项。