如何使用gulp-connect livereload设置gulp-watch？

Question

该站点上的大多数问题和答案都没有包含将两个库一起使用的易于遵循的一般方法。

因此，既然我们使用gulp-connectnpm软件包，并且想使用gulp-watchnpm软件包，那么如何设置它，以便我们可以：

• 观看某些文件中的更改
• 执行一些操作，例如构建/编译这些文件
• 完成构建后实时重新加载服务器

Answer 1

首先，您将定义构建任务。这可以有预先要求的任务，也可以是某种任务，没关系。

gulp.task('build', ['your', 'tasks', 'here']);

然后，您将需要激活连接服务器。重要的是要提供编译结果（在此示例中为dist目录），并使用livereload: true参数启用livereload 。

const connect = require('gulp-connect');

gulp.task('server', function() {
  return connect.server({
    root: 'dist',
    livereload: true
  });
});

最后，您将设置手表逻辑。请注意，我们使用watch而不是gulp.watch。如果决定更改它，请注意它们的API不同并且它们具有不同的功能。本示例使用gulp-watch。

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

gulp.task('watch-and-reload', ['build'], function() {
  watch(['src/**'], function() {
    gulp.start('build');
  }).pipe(connect.reload());
});

gulp.task('watch', ['build', 'watch-and-reload', 'server']);

该watch-and-reload任务将取决于该build任务，以便确保至少运行一个构建。

然后，它将监视您的源文件，并在回调中将启动build任务。每次在目录中更改文件时，都会执行此回调。您可以将options对象传递给watch方法，以使其更加具体。检查其存储库中的用法API 。

另外，您将需要开始build我们正在使用的操作gulp.start。这不是推荐的方法，最终会被弃用，但到目前为止它仍然有效。与StackOverflow中这些问题有关的大多数问题都将寻找一种替代方法来改变方法。（请参阅相关问题。）

注意，这gulp.start被同步调用。这就是您想要的，因为您希望build在继续事件流之前允许任务完成。

最后，您可以使用事件流重新加载页面。事件流将正确捕获更改的文件并重新加载这些文件。