Блог

Я изучаю разработку 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 ~Desktoprctmy-react-projectgulpfile.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.
  

Каждой целевой функции 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() { ...
  

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

РЕДАКТИРОВАТЬ: в compile_sass задача должна возвращать канал.

Я делал то же самое руководство, и у меня это сработало. Просто нужен возврат функции ‘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'));