Gulp 浏览器同步不起作用答案

【问题标题】：Gulp Browser Sync doesn't workGulp 浏览器同步不起作用
【发布时间】：2017-03-10 13:03:41
【问题描述】：

我正在尝试设置非常简单的 gulp 文件。我在那里使用 sass 和浏览器同步，并将所有内容移动到构建文件夹。但由于未知原因，浏览器不同步。我尝试了许多资源的解决方案，但到目前为止似乎没有任何效果。也许你们中的一些人会知道如何解决这个问题。

var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();
var reload = bs.reload;

gulp.task('styles', function() {
    gulp.src('sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('build/css'))
        .pipe(bs.reload({stream:true}));
});

gulp.task('serve', ['styles'], function() {
     bs.init({
            server: "./build"
        });

    gulp.watch('./sass/*.scss', ['styles']);
    gulp.watch('build/css/*.css').on('change', reload);
    gulp.watch("*.html").on('change', reload);
});

gulp.task('default', ['serve']);

我的文件夹结构是： - 建造 -CSS - index.html - 萨斯 - index.html

运行 gulp 后命令提示符显示如下：

非常感谢您的帮助！

【问题讨论】：

你试过了吗 .pipe(bs.stream());代替？
如果你只是删除该行会发生什么：gulp.watch('build/css/*.css').on('change', reload); ?

标签： gulp browser-sync

【解决方案1】：

Browsersync 通过在初始请求期间在 <body> 标记之后立即注入异步脚本标记 (<script async>...</script>) 来工作。为了使其正常工作，<body> 标签必须存在。

看看这个：https://browsersync.io/docs/#requirements

【讨论】：