如何设置 gulp-watch 与 gulp-connect livereload？

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。这不是推荐的方法，最终会被弃用，但到目前为止它是有效的。 Whosebug 中有关这些问题的大多数问题都将寻找改变方法的替代解决方法。（参见相关问题。）

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

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

Answer 2

根据当前稳定 gulp 版本

加快速度

gulp.task API isn't the recommended pattern anymore. Use exports object to make public tasks

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

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

gulp.watch
gulp-连接

watch 功能在 gulp 模块本身可用

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

连接

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

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

task passed to watch() should signal async complection else task will not be run a second time. Simple works: should call callback or return stream or promise

配置 watch() 后，在您认为需要重新加载由 dest 创建的文件的地方追加 .pipe(connect.reload()) 后跟 pipe(dest(..))

这里是使用 connect lifereload

的简单工作 gulpfile.js

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 
}

由于我们配置 public task dev 下面的命令将执行所有任务，然后是 connect 和 watchReload

gulp dev

如何设置 gulp-watch 与 gulp-connect livereload？

How to setup gulp-watch with gulp-connect livereload?

node.js

gulp-watch

gulp-connect