无法使用Gulp 4和Browsersync重新加载/自动注入页面

Laura 发表于 Dev

劳拉

尝试使用带有浏览器同步功能的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...

劳拉

我已经解决了问题并更新了要点。我的watch函数存在问题，似乎有必要在单独的函数中进行重新加载。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。