Gulp 自我重新加载吞咽时重复任务

Gulp 自我重新加载吞咽时重复任务,gulp,gulp-watch,Gulp,Gulp Watch,我已经设置了gulp,以便在修改gulpfile时重新加载。这一基本流程正在运行,但由于某些原因,旧任务似乎没有被正确终止 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 =

我已经设置了gulp,以便在修改gulpfile时重新加载。这一基本流程正在运行,但由于某些原因,旧任务似乎没有被正确终止

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']);
});
这是一个基本的gulpfile,说明了问题所在。当我调整gulpfile使其重新加载时,我会在控制台中收到以下信息:

[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
然后在目录中修改一个较少的文件,就会得到这个输出

[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
随后的每次重启似乎都会导致对样式的额外调用,就好像旧的观察者仍然存在一样

我也用这个示例项目创建了一个小型项目。

在这个任务中:

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

我认为你的理由可能是正确的,对过程的引用。不过,我不太喜欢管理一群观察者。所做的工作是将gulpfile的监视转移到defailt任务中,并将生成部分包装到函数中。