页面不是 reloading/autoinjecting Gulp 4 和 Browsersync

Question

正在尝试使用 Gulp4 和 Browsersync 来为新的 PWA 创建创建样板，以自动执行任务、自动重新加载和自动注入更改。进行更改时会更新 Dist 文件夹文件。 Reload 仅适用于 HTML 。 CSS 不会自动注入并且 HTML 在更改 CSS 和 HTML 后不会重新加载。 https://gist.github.com/flaura42/a22823d97baf889160b2b18ca85dbfb4

我已经阅读了很多其他 SO 问题并尝试了不同的方法来做到这一点，但到目前为止没有任何效果。 Gist 注释掉了代码以展示我尝试过的一些方法。我在安装 Gulp 4.

之前卸载了 Gulp

import babel from 'gulp-babel';
import browserSync from 'browser-sync';
import del from 'del';
const server = browserSync.create();

// Process and minify css, copy to dist folder
export function styles() {
  return gulp.src(paths.styles.src)
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(server.reload({stream: true}));
}

// Copy html to dist folder
export function html() {
  return gulp.src(paths.html.src)
    .pipe(gulp.dest(paths.html.dest));
}

// Watch files for changes and reload server
export function watch() {
  gulp.watch(paths.styles.src, styles);
  gulp.watch(paths.html.src, html).on('change', server.reload);
}

// Start serving src folder
export function serve(done) {
  server.init({
    server: {
      baseDir: './src'
    }
  });
  done();
}

// Build dist folder, start server, and watch files
const build = gulp.series(clean, gulp.parallel(styles, html), serve, watch);

// Make build be default task
export default build;

我希望页面在进行更改后 reload/auto-inject。终端输出表明发生了这种情况，但未显示任何更改：

[13:35:57] Starting 'styles'...
[Browsersync] 1 file changed (app.css)
[13:35:57] Finished 'styles' after 8.05 ms
[13:36:03] Starting 'html'...
[13:36:03] Finished 'html' after 6.04 ms
[Browsersync] Reloading Browsers...

Answer 1

你的 server.baseDir 应该是你的 dist 目录：

export function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}

我在 this gist 中创建了一个简化版本。

Answer 2

我已经解决了问题并更新了要点。我的手表功能有问题，似乎有必要在单独的功能中完成重新加载。

function reload(done) {
  server.reload();
  done();
}

// Watch files for changes and reload server
export function watch() {
  gulp.watch(paths.styles.src, gulp.series(styles, reload));
  gulp.watch(paths.html.src, gulp.series(html, reload));
}

要点：https://gist.github.com/flaura42/a22823d97baf889160b2b18ca85dbfb4

再看一遍这个食谱后发现了问题： https://github.com/gulpjs/gulp/blob/master/docs/recipes/minimal-browsersync-setup-with-gulp4.md

页面不是 reloading/autoinjecting Gulp 4 和 Browsersync

Page not reloading/autoinjecting with Gulp 4 and Browsersync

javascript

gulp

gulp-watch

browser-sync