Sass 使用Gulp更改后，浏览器同步不会刷新页面

我是Gulp的新手，我想利用它的自动SCS编译和浏览器同步。但我不能让它工作

我剥离了所有内容，只在Browsersync网站上保留了示例的内容：

我可以叫大口发球。网站正在显示，我从Browsersync收到一条消息。当我修改HTML时，页面被重新加载。然而，当我修改SCS时，我可以看到：

[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms

---

但我必须手动重新加载。我遗漏了什么？

这是因为您正在html手表上而不是在scss手表上调用

browserSync.reload

试试这个：

gulp.watch("app/scss/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("app/*.html").on('change', browserSync.reload);

---

如果愿意，您可以只注入更改，而不必强制对SASS compile进行完全的浏览器刷新

browserSync.init({
    injectChanges: true,
    server: "./app"
});

gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream({match: '**/*.css'}));
});

---

这就是我使用的，它在sass或任何其他文件中都可以正常工作

gulp.task('browser-sync', function () {
   var files = [
      '*.html',
      'css/**/*.css',
      'js/**/*.js',
      'sass/**/*.scss'
   ];

   browserSync.init(files, {
      server: {
         baseDir: './'
      }
   });
});

---

我将其包含在我的html中，就在body标记的正下方。它起作用了

<script type='text/javascript' id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.2.11.1.js'><\/script>".replace("HOST", location.hostname));//]]>
</script>

//

在尝试重新加载

php

和

js

文件和流式

css

文件时遇到了同样的问题。我只能通过使用

pipe

方法来使用stream，这很有意义。不管怎样，以下是对我有效的方法：

gulp.watch(['./**/*.css']).on('change', function (e) {
    return gulp.src( e.path )
        .pipe( browserSync.stream() );
});

但是，我更喜欢@pixie的答案：

gulp.task('default', function() {
    var files = [
            './**/*'
        ];
    browserSync.init({
        files : files,
        proxy : 'localhost',
        watchOptions : {
            ignored : 'node_modules/*',
            ignoreInitial : true
        }
    });
});

---

我也有同样的问题。当我作为一个单独的任务调用reload方法时，它起作用了

gulp.task('browserSync', function() {
  browserSync.init(null, {
    server: {
      baseDir: './'
    },
  });
})

gulp.task('reload', function(){
    browserSync.reload()
})

gulp.task('watch', ['sass', 'css', 'browserSync'], function(){
   gulp.watch('*.html', ['reload']);
})

---

当我刚开始使用浏览器同步时，我也遇到了类似的问题，命令行说“重新加载浏览器”，但浏览器根本没有刷新，问题是我没有在HTML页面中包含body标记，浏览器同步可以为其功能注入脚本，请确保您的HTML页面具有body标记

有时在使用CLI时，HTML主文件中没有插入脚本，因此应手动添加此脚本或使用gulp

    <!-- START: BrowserSync Reloading -->
    <script type='text/javascript' id="__bs_script__">
        //<![CDATA[
        document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
        //]]>
    </script>
    <!-- END: BrowserSync Reloading -->

//

你说得对。我认为这是

.pipe（browserSync.stream（））

的工作。谢谢，可惜这不容易。如果我没有偶然发现你的答案，我永远也不会用MAMP/Gulp设置解决这个问题…我想知道为什么我的页面没有加载，但实际上它是在注入css。。不错，我觉得这个答案更好；但是，在我的情况下（可能是因为我使用了代理），我无法使用

。/***'

全局模式。^我现在意识到我的问题是我在看node_模块目录这是最简单的答案，它仍然可以在最新稳定的browser-sync中正常工作。谢谢你帮我省去了几天的挫折。坦率地说，这与Gulp无关，因此可能应该有自己的问题/答案，因为我知道我不是唯一一个第一次用简单的无标记

index.html

文件以懒散的方式测试它的人，我想知道…嘿，为什么这不起作用？宝贵的，宝贵的知识，先生。我也有同样的问题！遗漏了用于快速测试的正文标记，然后无法找出浏览器同步停止工作的原因。。。非常感谢！！！在阅读有关BrowserSync的文章时，我一定错过了这个简单的概念。感谢您的发布，刚刚结束了两个小时的沮丧。如果您真的不想在我的HTML中使用

标记，您可以使用该选项将BrowserSync脚本插入HTML文件的另一个位置。效果非常好！如果您在本地开发分支，请不要忘记创建一个检查来查看某个环境变量：）我本来打算键入这个答案，但因为它已经在这里，所以我向上投票。我在这里也找到了答案：抛出一个错误：

AssertionError[ERR\u ASSERTION]：必须指定任务函数

    <!-- START: BrowserSync Reloading -->
    <script type='text/javascript' id="__bs_script__">
        //<![CDATA[
        document.write("<script async src='/browser-sync/browser-sync-client.js'><\/script>".replace("HOST", location.hostname));
        //]]>
    </script>
    <!-- END: BrowserSync Reloading -->