我无法弄清楚为什么我的 gulp 文件没有监视我的 html 文件



我在过去使用gulp 3之后,第一次使用gulp 4。我为我的项目设置了一个 gulp 构建,尽管它适用于其他所有内容,但它只是简单地拒绝观看任何 html 更改并在更改时重新加载页面。运行gulp watch时,我没有收到任何错误,并在我的终端中获取标准的"从./dist提供文件"。

它正在工作,但我必须改变一些东西,但就是无法弄清楚是什么!

// bs
function browserSync(done) {
  server.init({
    server: {
      baseDir: "./dist"
    }
  });
  done();
}
// reload
function reload(done) {
  server.reload();
  done();
}
// html task
function html() {
  const out = `${dist}/`;
  return gulp
    .src(`${src}/**/*.html`)
    .pipe(newer(out))
    .pipe(devBuild ? noop() : htmlclean())
    .pipe(gulp.dest(out));
}
// watch for file changes
function watch(done) {
  // html changes
  gulp.watch(`${src}/**/*.html`, gulp.series(html, reload));
  // css changes
  gulp.watch(`${src}/scss/**/*`, gulp.series(css));
  // js changes
  gulp.watch(`${src}/js/**/*`, gulp.series(js));
  //sw changes
  gulp.watch(`${src}/sw.js`, gulp.series(sw));
  done();
}
exports.watch = gulp.parallel(watch, browserSync);

我希望任务复制我的 html 文件,并且服务器使用包含我的 html 更改进行刷新

我在构建任务中缺少对导出的引用。不确定这是否会影响它,但我也删除了我的浏览器缓存,它似乎又开始工作了。不确定这一点,但如果这对将来的阅读有帮助,案例就解决了。

exports.build = gulp.series(
  exports.clean,
  gulp.parallel(
    exports.favicon,
    exports.fonts,
    exports.html,
    exports.css,
    exports.js,
    exports.sw
  )
);

编辑*:原来我正在从我的服务工作者那里加载资产,完全忘记在刷新时打开 Chromes 重新加载以使用软件开发!

最新更新