Gulp会自动监视scss文件中的更改，而无需每次都运行gulp watch

Question

我是这个网站的新手并且吞咽了一下。

我有2个文件 - sass / styles.scss，它们编译为main / 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选项。