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

每个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 here（Chokidar是gulp用来观看文件的库）

---

编辑：在compile_sass，任务必须返回管道。

Answer 2

我正在做相同的教程，这对我有用。只需要'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'));