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'));
});

最后，如果 none 有效，请尝试将 usePolling 选项传递给观察者：

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

在某些系统中，它需要它才能正常工作。你可以查看整个 Chkidar API here（Chokidar 是 gulp 用来查看文件的库）

编辑：在 compile_sass 中，任务必须 return 管道。

Answer 2

我正在做同样的教程，这对我有用。只需要 'compile-css' 函数上的 return：

'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'));

gulp-watch 在检测到 .scss 文件中只有一个变化后停止。有什么办法可以在这段代码中保留它 运行 吗？

gulp-watch stops after detecting only one change in .scss file. Is there any way to keep it running in this code?

gulp

gulp-watch

gulp-sass

gulp-watch 在检测到 .scss 文件中只有一个变化后停止。有什么办法可以在这段代码中保留它运行吗？