使用 gulp 的 Browsync 不会刷新浏览器答案

【问题标题】：Browsync with gulp doesn´t refresch browser使用 gulp 的 Browsync 不会刷新浏览器
【发布时间】：2017-07-19 00:07:08
【问题描述】：

已解决

如果您在命令行(Reloading browsers...) 中收到消息并且它没有重新加载浏览器，您必须将 html 和 body 标签添加到您的 index.php / index.hmtl 文件中。

【问题讨论】：

没有代码？ #magicshow
你能帮我解决这个问题吗？
能不能给满gulpfile.js？
是的，我更新并添加了完整的 gulpfile.js。

标签： gulp browser-sync

【解决方案1】：

首先，如果一项任务可以完成，为什么需要两项任务？

gulp.task('style', function () {
    return gulp.src( styleSRC )
    /*********** COMPILE ***********/
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'compact'
        // outputStyle: 'compressed'
        // outputStyle: 'nested'
        // outputStyle: 'expanded'
    }).on('error', sass.logError))
    .pipe( sourcemaps.init( { loadMaps: true } ) )
    .pipe( autoprefixer( AUTOPREFIXER_BROWSERS ) )
    .pipe(sourcemaps.write('/maps'))
    .pipe(gulp.dest( styleDEST )) // Sass -> css
    /*********** MINIFY ***********/
    .pipe(cleanCSS({
        level: '2',
        debug: true}, function(details) {
            console.log(details.name + ': ' + details.stats.originalSize + ' kb');
            console.log(details.name + ': ' + details.stats.minifiedSize + ' kb');
            console.log(details.name + ': ' + details.stats.timeSpent + ' ms');
            console.log(details.name + ': ' + details.stats.efficiency + '%');
        }))
    .pipe( rename( { suffix: '.min' } ) ) // rename to .min
    .pipe(gulp.dest( styleDEST )) // Publish
    .pipe(browserSync.stream())
    .pipe( notify( { message: 'TASK: "style" Completed! ?', onLast: true } ) );
});

现在，回到你的问题。 Browsersync 仅在完成编译后才关心您的 CSS - 请确保在 gulp.dest 之后调用 .stream()。

.pipe(browserSync.stream())

你只在缩小任务中使用browserSync.stream()，而不是在样式任务中。另外，请确保<body> 标签必须存在。

Browsersync 的工作原理是在初始请求期间在标记之后立即注入异步脚本标记 (<script async>...</script>)。 为了使其正常工作，<body> 标记必须存在。或者，您可以使用 snippetOptions 为 sn-p 提供自定义规则

【讨论】：

感谢您的帮助！我的问题是：我的索引文件中没有任何 html 和 body 标签。我只有 h1 和 h2 :) 谢谢！