页面不使用 Gulp 4 和 Browsersync 重新加载/自动注入答案

【问题标题】：Page not reloading/autoinjecting with Gulp 4 and Browsersync页面不使用 Gulp 4 和 Browsersync 重新加载/自动注入
【发布时间】：2019-10-05 18:21:48
【问题描述】：

尝试使用带有 Browsersync 的 Gulp 4 为新的 PWA 创建创建样板，以自动执行任务、自动重新加载和自动注入更改。进行更改时正在更新 Dist 文件夹文件。重新加载仅适用于 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;

我希望页面在进行更改时重新加载/自动注入。终端输出表明正在发生这种情况，但未显示任何更改：

[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...

【问题讨论】：

标签： javascript gulp browser-sync gulp-watch

【解决方案1】：

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

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

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

【讨论】：

实际上，我都尝试过，但似乎都不起作用。感谢您的建议。
@Laura 我原来的答案是错误的，我发现了问题并在上面进行了编辑。
我倾向于在初始开发期间为我的 src 文件夹提供服务，并且只有在我做得很好后才测试 dist 文件夹。我想我确实弄清楚了问题所在，并且会在我进行更多测试后发布。

【解决方案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

【讨论】：