自动重新加载重复任务 gulp

Question

我已经设置了 gulp 以便当 gulp 文件被修改时它会重新加载。该基本过程正在运行，但由于某种原因，旧任务似乎没有正确终止。

var gulp = require('gulp');
var less = require('gulp-less');
var spawn = require('child_process').spawn;

gulp.task('default', function(){
    var p;

    if(p)
        p.kill();

    p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});

gulp.task('watch', ['styles', 'watch-styles', 'watch-gulp']);

gulp.task('styles', function(){
    return gulp.src('./**/*.less')
    .pipe(less())
    .pipe(gulp.dest('./'))
});

gulp.task('watch-styles', ['styles'], function(){
    gulp.watch('./**/*.less', ['styles']);
});

gulp.task('watch-gulp', ['styles'], function(){
  gulp.watch('./gulpfile.js', ['default']);
});

这是演示问题的基本 gulp 文件。当我调整那个 gulp 文件以使其重新加载时，我在控制台中收到了这个：

[11:21:02] Starting 'default'...
[11:21:02] Finished 'default' after 5.25 ms
[11:21:02] Using gulpfile ~/repo/gulp-reload/gulpfile.js
[11:21:02] Starting 'styles'...
[11:21:02] Finished 'styles' after 34 ms
[11:21:02] Starting 'watch-styles'...
[11:21:03] Finished 'watch-styles' after 669 ms
[11:21:03] Starting 'watch-gulp'...
[11:21:03] Finished 'watch-gulp' after 1.83 ms
[11:21:03] Starting 'watch'...
[11:21:03] Finished 'watch' after 2.92 μs

然后在目录中修改一个 less 文件给出这个输出

[11:21:24] Starting 'styles'...
[11:21:24] Finished 'styles' after 8.95 ms
[11:21:24] Starting 'styles'...
[11:21:24] Finished 'styles' after 2.92 ms

随后的每次重启似乎都会导致对样式的额外调用，就好像旧观察者还在那里一样。

我也用这个示例项目创建了一个小 repo on Github。

Answer 1

在这个任务中：

gulp.task('default', function(){
    var p;

    if(p)
        p.kill();

    p = spawn('gulp', ['watch'], {stdio: 'inherit'});
});

p 从未定义，因为调用该函数时总是会创建一个新变量。此外，您没有指向要终止的自己进程的指针。一个更安全的方法是手动结束所有其他观察者：

gulp.task('watch-styles', ['styles'], function(){
    var watcher = gulp.watch('./**/*.less', ['styles']);
    watchers.push(watcher);
});

gulp.task('watch-gulp', ['styles'], function(){
    var watcher = gulp.watch('./gulpfile.js', ['default']);
    watchers.push(watcher);
    watcher.on('change', function(){
        watchers.forEach(function(el){
            el.end();
        })
    })
});

自动重新加载重复任务 gulp

Duplicate Tasks on self reloading gulp

gulp

gulp-watch