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.task API不再是推荐的模式。使用导出对象执行公共任务

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

要配置观看和实时重载，您需要遵循

gulp.watch
gulp-connect

监视功能在gulp模块本身中可用

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

安装gulp-connect

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

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

传递给watch（）的
任务应该表明异步选择，否则该任务将不会再次运行。简单的工作：应该调用回调或返回流或答应

配置了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 
}

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

gulp dev

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

2 个答案: