Question

我正在开发一个网站构建工具（https://github.com/bmargogne/website-builder.git）。 BrowserSync在root index.html上工作正常，但在其他任何地方都没有重新加载......

这是我如何做的（简化）方式......让我们说：

src/index.html
src/_header.html
src/page/index2.Html

一项任务通过包含html部分来构建HTML网页（其名称以＆＃39; _＆＃39;开头）

gulp.task('pagesHtml', () => {
    const SRC = 'src/**/*.html';
    const EXCLUDE = '!src/**/_*.html';
    return gulp.src( [SRC, EXCLUDE], { ignoreInitial: false } )
        pipe(   fileinclude({ prefix: '@@', basepath: co.src }))
        .pipe(  gulp.dest( 'www/' ));
});

一项任务启动浏览器同步服务器

gulp.task('serveLocal', () => {
    return browserSync.init({
        server:{ baseDir : 'www' },
        port: 3000,         
        open: true
    }); 
});

一个任务被调用重新加载browserSync （分开，因为它被其他＆＃39;观察者任务从我的项目中调用）

gulp.task('liveReload', ()) => {
    browserSync.reload();
});

一项任务观看所有HTML （包括部分内容）并应重建整个页面，然后重新加载。

gulp.task('watch-pagesHtml', () => {
    const SRC = 'src/**/*.html';        
    return watch( SRC, () => {
        runSequence('pagesHtml', 'liveReload');
    });
    return;
});

我启动这些任务，方法是启动runSequence，如下所示：

gulp.task('default', () => {
    runSequence('pagesHtml', 'watch-pagesHtml');
});

当我处理index或_header时：完全没问题！应用，构建和浏览重新加载更改。

但是，当我处理pages/index2时，会应用并构建更改，但浏览器不会重新加载。（尽管F5可以工作并显示应用的更改）

我做错了什么？

Answer 1

Browsersync通过在正文中注入异步脚本标记，启动项目并检查正文标记来工作。（使用浏览器开发人员工具）。

如果你不能这样做： <script async>...</script>（和browsersync的东西），有问题。

我读了你的代码，我注意到你在头文件中写了<body>（开放标记），在其他页脚文件中写了</body>（关闭标记），这让我感到困惑但是我做了当我认为有必要时，在其他html文件中找不到body标签。

浏览器＆＃34;尝试＆＃34;修复html中的错误，例如从原始html文件自动完成标记。

我对你的问题有两个可能的答案。

1）浏览器自动填充头文件中的标签，同时也自动填充页脚文件中的标签，因此browserync有问题注入重新加载页面所需的异步脚本标签，因为有两个主体。（如果可能的话）

2）浏览器在html中找不到body标签，所以浏览器在之后创建它，但是browsersync会将脚本注入你的html文件，而不是浏览器。

确保body标签是由您自己的代码生成的，而不是由浏览器生成的。

我希望有所帮助。

Answer 2

有点晚了，但如果有人还在寻找答案，你可以这样做：

var browserSync = require("browser-sync");

browserSync({
    proxy: "wordpress.dev",
    snippetOptions: {
        ignorePaths: "wp-admin/**"
    }
});

browsersync只重新加载＆＃39; root＆＃39;的index.html

2 个答案: