0

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

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

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

2 回答 2

6

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

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给更具体的方法。检查他们存储库中的使用 API 。

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

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

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

于 2017-03-19T18:26:35.607 回答
1

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

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

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

要配置 watch 和 livereload，您需要以下

  • gulp.watch
  • 吞咽连接

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

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

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

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

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

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

这是简单的工作 gulpfile.js 与连接 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
于 2020-01-04T20:40:14.430 回答