为什么实时重载不能与gulp-connect一起工作？

Question

我像这样使用gulp-connect：

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);

  gulp.watch(distPaths, function() {
    return gulp.src(distPaths)
               .pipe(connect.reload());
  });
});

实时重新加载位工作正常。

我的问题是，为什么以下方法不起作用：

gulp.task('watch', function() {
  gulp.watch(paths.scss, ['scss']);
  gulp.watch(distPaths, connect.reload);
});

gulp.src(distPaths)位是用来做什么的？

另外，return的重要性是什么？

Answer 1

1. connect.reload()需要在流中使用。在您的示例中，您试图将其作为一个独立的函数调用，但它什么也不做。调用connect.reload()将返回一个流处理程序，该处理程序接受输入并对其执行某些操作。在第二个例子中，这是一个有效的无操作，

，

1. ，你需要return或者tasks are run synchronously。(您也可以返回promise或使用回调函数。)

基本上，如果您没有提供某种方法让gulp跟踪您的异步任务的进度，那么当您从函数返回时，它必须假定这些任务已经完成。如果你return管道，它可以监听，让它到达管道的末端。

此外，对您的手表使用gulp-watch可能会更好，因为它只传递已更改的文件，这是您希望实时重新加载的文件：

var watch = require('gulp-watch');

gulp.task('watch', function() {
    gulp.watch(paths.scss, ['scss']);
    watch(distPath).pipe(connect.reload());
});

Answer 2

我也花了一段时间来弄清楚如何将重新加载功能与我的设置连接起来。我的监视任务包括多个文件夹，因为我在开发时并不总是运行完整的构建任务。有些文件是根据约曼gulp-webapp generator从.tmp文件夹中加载的。我不确定这是不是最快的方法，但我是这样解决的：

 gulp.watch([
    '.tmp/*.html',
    '.tmp/styles/**/*.css',
    'app/js/**/*.js',
    'app/images/**/*'
]).on('change', function (file) {
    gulp.src( file.path)
        .pipe( $.connect.reload() );
});

希望这对某些人也有帮助。

Answer 3

我不完全理解为什么(@overzealous很好)，但我发现我的更少的文件被持续刷新‘一个版本’，类似于这个问题发布到生成器-gulp webapp：Livereload seems to be a save behind on loading changes #77

因为version 0.3.0生成器-gulp webapp使用browsersync而不是连接/livereload，更新我的gulpfile来匹配解决了我所有的问题！

HTH