gulp-watch останавливается после обнаружения только одного изменения в файле .scss.Есть ли способ сохранить его в этом коде?

Question

Я изучаю разработку React и использую gulp и sass для CSS.Задача gulp-watch только один раз завершает задачу compile_scss и перестает ее выполнять.Есть ли способ поддерживать часы в активном состоянии?Я включил код и полученные в результате выводы терминала ниже.

Код, из которого я учусь, предназначен для предыдущей версии gulp.Версия, которую я сейчас использую, использует обновленный синтаксис, т.е. gulp.series ('compile_scss') вместо [compile_scss]. Я соответственно обновил свой код.

'use strict';

//dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');


//SCSS/CSS


var SCSS_SRC = './src/assets/scss/**/*.scss';
var SCSS_DEST = './src/assets/css';

//compile SCSS
gulp.task('compile_scss', function(){

    gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST));
});


//detect changes in SCSS
gulp.task('watch_scss', gulp.series(function(){
    gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
}));


//Run tasks
gulp.task('default', gulp.series('watch_scss'));
````````````

````Terminal Output
[14:08:37] Using gulpfile ~\Desktop\rct\my-react-project\gulpfile.js
[14:08:37] Starting 'default'...
[14:08:37] Starting 'watch_scss'...
[14:08:37] Starting '<anonymous>'...
[14:08:48] Starting 'compile_scss'...
```````````

I expect the gulp-watch to always check for changes in my source.

Answer 1

Я делал то же самое руководство, и это работало для меня. Просто нужно вернуть функцию 'compile-css':

'use strict';

// dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');



///////////////////
// - SCSS/CLASS
/////////////////
var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';

// Compile SCSS

gulp.task('compile_scss', function(){
  return gulp.src(SCSS_SRC)
  .pipe(sass().on('error', sass.logError))
  .pipe(minifyCSS())
  .pipe(rename({suffix: '.min'}))
  .pipe(changed(SCSS_DEST))
  .pipe(gulp.dest(SCSS_DEST));
});

// detect changes in SCSS_SRC
gulp.task('watch_scss', function(){
  gulp.watch(SCSS_SRC,gulp.series('compile_scss'));
});

// Run tasks
gulp.task('default',gulp.series('watch_scss'));

Answer 2

Каждой функции задачи gulp передается обратный вызов в качестве первого аргумента, чтобы вы могли сигнализировать о завершении задачи.

В вашей задаче compile_scss вы должны сообщить об асинхронном завершении, выполнив этот вызов задачиконец.

//compile SCSS
gulp.task('compile_scss', function(done){
    return gulp.src(SCSS_SRC)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(changed(SCSS_DEST))
    .pipe(gulp.dest(SCSS_DEST))
    .on('end', function(error) {
      if (error) {
        // Handle errors if any
      }
      // Signal that the task is over
      done();
    })
});

Кроме того, вам не нужно переносить задачу watch в gulp.series.Это может (должно?) Быть так:

//detect changes in SCSS
gulp.task('watch_scss', function() {
    return gulp.watch(SCSS_SRC, gulp.series('compile_scss'));
});

Наконец, если ничего из этого не работает, попробуйте передать опцию usePolling наблюдателю:

gulp.task('watch_scss', {usePolling: true}, function() { ...

В некоторых системах, это необходимо для правильной работы.Вы можете проверить весь API Chkidar здесь (Chokidar - это библиотека, используемая gulp для просмотра файлов)

---

EDIT: в compile_sass задача должна вернуть канал.