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

connect.reload()需要在流中使用。在您的示例中，您尝试将其称为独立函数，它不执行任何操作。调用connect.reload()会返回一个流处理程序，它接受输入并对其执行某些操作。在第二个例子中，它实际上是一个无操作。
您需要return或tasks are run synchronously。（您也可以返回一个承诺或使用回调函数。）

基本上，如果你没有为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

我花了一段时间才弄清楚如何将重装功能与我的设置连接起来。我的监视任务包括多个文件夹，因为我在开发过程中并不总是运行完整的构建任务。某些文件是根据Yeoman 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 generator-gulp-webapp使用browsersync而不是connect / livereload，并且更新我的gulpfile以匹配解决了我的所有问题！

HTH

为什么没有使用gulp-connect重新加载工作？

3 个答案: