Gulp автоматически следит за изменениями в файле scss без запуска gulp watch каждый раз

Question

Я новичок в этом сайте и gulp.

У меня есть 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

Я хочу сделать этот автоматический процесс вместо запуска gulp watch каждый раз, когда я изменяю файл sass.

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.