Question

我正在使用gulp-watch来监控文件更改，我的代码看起来像这样：

watch('public/**/*.js',function(){
    runSequence('compressjs','browser-sync','jshint');
});

工作正常。但是因为它在文件发生更改时每次都会运行任务，所以当更改了多个文件时会导致重复执行任务。

如何延迟执行任务，以便在极短的时间内有多个文件更改时，它只执行一次任务，只在最后一次文件更改完成后执行？

Answer 1

取自：https://remysharp.com/2010/07/21/throttling-function-calls#comment-216435

试试这个：

function debounce(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

watch('public/**/*.js',function(){
    debounce(runSequence('compressjs','browser-sync','jshint'), 500);
});

Answer 2

经过多次搜索和使用debounce，debounce手表的许多失败后，我想出了一个简单的解决方案，其中我的功能＆＃39; buildAngularApp＆＃39;相当于＆＃39; runSequence＆＃39;。这是代码示例：

//the files to watch    
var backendModules = ['**/*.min.js']
var delay = 2000;

/*
The watched build task
*/
gulp.task('watchBuild', function () { 
    console.log('Watching: ' + backendModules);
    gulp.watch(backendModules,
        function () {
            setTimeout(function () {
                console.log('Timer ' + delay + ' Reached');
                return buildAngularApp();
            }, delay);
        });
});

/*
The non watched task to build. calls the same build function
*/
gulp.task('build', function () {
    return buildAngularApp();
})

/*
The gulp task wrapped in a function
*/
function buildAngularApp() {
    return gulp.src(backendModules)
        .pipe($.useref())
        .pipe($.sourcemaps.init())
        .pipe($.concat('app.js'))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('lib/js'))
        .pipe($.size({
            title: path.join('lib/js'),
            showFiles: true
        }));
}

Answer 3

在Gulp 4中，gulp.watch支持设置延迟。有关完整的下拉列表，请参见my answer here。

延迟gulp-watch执行

3 个答案: