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

Question

本网站上的大多数问题和答案都不包含将这两个库一起使用的易于遵循的通用方法。

所以，既然我们使用gulp-connect npm 包，并且我们想使用gulp-watch npm 包，我们如何设置它以便我们可以：

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

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 任务。每次更改目录中的文件时都会执行此回调。您可以将选项对象传递给watch 方法以更具体。检查their repository中的使用API​​。

此外，您还需要启动build 操作，我们为此使用gulp.start。这不是推荐的方法，最终将被弃用，但到目前为止它有效。 StackOverflow 中与这些问题有关的大多数问题都将寻找改变方法的替代解决方法。 （请参阅相关问题。）

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

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

Answer 2

根据当前稳定的 gulp 版本加快速度

gulp.task API 不再是推荐的模式。使用导出对象制作公共任务

来自官方文档：https://gulpjs.com/docs/en/api/task#task

要配置 watch 和 livereload，你需要遵循

• gulp.watch
• gulp 连接

gulp 模块本身提供监视功能

使用npm install --save-dev gulp-connect安装 gulp-connect

要为 livereload 配置 gulp-connect 服务器，我们需要将属性 livereload 设置为 true

运行所有任务，然后运行调用 watch 函数的任务，其中给出了 glob 和任务。对匹配 glob 的文件的任何更改都会触发传递给 watch() 的任务。

传递给 watch() 的任务应该发出异步完成的信号，否则任务将不会再次运行。简单的作品：应该调用回调或返回流或承诺

配置 watch() 后，将 .pipe(connect.reload()) 后跟 pipe(dest(..)) 附加到您认为需要重新加载 dest 创建的文件的位置

这里是简单的 gulpfile.js 和 connect lifereload

const {src, dest, watch, series, parallel } = require("gulp"); 
const htmlmin = require("gulp-htmlmin");
const gulpif = require("gulp-if");
const rename = require('gulp-rename');
const connect = require("gulp-connect");

//environment variable NODE_ENV --> set NODE_ENV=production for prouduction to minify html and perform anything related to prod
mode = process.env.NODE_ENV || 'dev';  
var outDir = (mode != 'dev') ? 'dist/prod': 'dist/';
const htmlSources = ['src/*.html'];

function html() {
  return src(htmlSources)
  .pipe(gulpif(
      mode.toLowerCase() != 'dev', 
      htmlmin({
        removeComments: true, 
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
      })
    )
  )
  .pipe(dest(outDir))
  .pipe(connect.reload()); 
}

function js(){
  return src('src/*.js')
  .pipe(uglify())
  .pipe(rename({ extname: '.min.js' }))
  .pipe(dest(outDir))
  .pipe(connect.reload());
}

function server() {
  return connect.server({
    port: 8000,
    root: outDir,
    livereload: true
  })
}

function watchReload() {
  let tasks = series(html, js);
  watch(["src/**"], tasks);
}

exports.html = html; 
exports.js = js;
exports.dev = parallel(html, js, server, watchReload);

使用 livereload 属性配置连接服务器

function server() {
      return connect.server({
        port: 8000,
        root: outDir,
        livereload: true  //essential for live reload 
      })
    }

注意上面代码中的.pipe(connect.reload())。必须将所需文件流通过管道传输到 connect.reload() 否则如果您任意调用 connect.reload() 可能无法正常工作

function html() {
  return src(htmlSources)
  .pipe(gulpif(
      mode.toLowerCase() != 'dev', 
      htmlmin({
        removeComments: true, 
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
      })
    )
  )
  .pipe(dest(outDir))
  .pipe(connect.reload());  //Keep it if you want livereload else discard 
}

由于我们配置了公共任务 dev 以下命令将执行所有任务，然后是 connect 和 watchReload

gulp dev