頁面沒有使用Gulp 4和Browsersync重新加載/自動注入

Question

嘗試使用Gulp 4和Browsersync創建用於創建新PWA的樣板，以自動執行任務，自動重新加載和自動注入更改。 正在進行更改時正在更新Dist文件夾文件。 重新加載僅適用於HTML。 CSS不會自動注入，並且在更改CSS和HTML后不會重新加載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...

Answer 1

您的server.baseDir應該是您的dist目錄：

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

我在這個要點中創建了一個簡化版本。

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