browsersync 仅重新加载“根”index.html答案

【问题标题】：browsersync only reloads 'root' index.htmlbrowsersync 仅重新加载“根”index.html
【发布时间】：2016-10-29 08:11:56
【问题描述】：

我正在开发一个网站构建工具 (https://github.com/bmargogne/website-builder.git)。 BrowserSync 在根 index.html 上可以完美运行，但它不会在其他任何地方重新加载...

这是我的（简化）方式......假设我有：

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

一项任务构建 HTML 页面，包括 html 部分（它们的名称以“_”开头）

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（分开，因为它被我项目中的其他“观察者任务”调用）

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

还有一项任务查看所有 HTML（包括部分 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 可以工作并显示应用的更改）

我做错了什么？

【问题讨论】：

标签： gulp browser-sync

【解决方案1】：

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

如果您不能解决以下问题： <script async>...</script>（和 browsersync 的东西），有问题。

我读了你的代码，我注意到你在头文件中写了<body>（打开标签），在其他页脚文件中写了</body>（关闭标签），这很令人困惑，但我没有找到正文当我认为有必要时，在其他 html 文件中添加标签。

浏览器“尝试”修复 html 中的错误，例如自动完成原始 html 文件中的标签。

对于您的问题，我有两个可能的答案。

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

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

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

希望对你有帮助。

【讨论】：

非常感谢您的分析！我会调查你的建议并告诉你我是否可以解决我的问题:)

【解决方案2】：

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

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

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

【讨论】：