Gulp - BrowserSync 不会重新加载页面答案

【问题标题】：Gulp - BrowserSync doesn't reload pageGulp - BrowserSync 不会重新加载页面
【发布时间】：2018-11-30 04:44:24
【问题描述】：

我正在学习来自here 的 Gulp 基本教程，但我被困在浏览器同步实现上。我已经完全按照示例中的方式复制了代码，但是当我运行 watch 任务时，即使 sass 任务执行没有问题（创建了新版本的 css 文件），浏览器也不想刷新！这是我的代码：

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

gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
      .pipe(sass())
      .pipe(gulp.dest('app/css'))
      .pipe(browserSync.reload({stream: true}));
});

gulp.task('browserSync', ['sass'], function() {
    browserSync.init({
        server: {
            baseDir: 'app'
        },
    })
  })

gulp.task('watch', ['browserSync'], function() {
    gulp.watch('app/scss/**/*.scss', ['sass']); 
    // Other watchers
});

这是我的 index.html

<!doctype html>
<html>
    <head>  
        <title>test</title>
        <link href="css/styles.css" rel="stylesheet" type="text/css" />
    </head>
    <body></body>
</html>

我的 styles.scss 文件只有一种样式：

body {
    background: blue;
}

这是我更新 styles.scss 时控制台窗口的输出

所以我可以看到浏览器同步知道所做的更改，但它不会在浏览器中重新加载页面。这是为什么？我查看了教程下的 cmets，似乎没有人面临类似的问题。我还看过其他几个教程，但没有一个对我有用。我使用最新版本的 chrome 作为我的默认浏览器，浏览器同步版本 5.6.0 和 gulp 版本 3.9.1

【问题讨论】：

标签： css gulp browser-sync gulp-watch

【解决方案1】：

我从未听说过通过browserSync.reload 管道文件作为重新加载开发服务器的一种方式，并且在browserSync documentation 中找不到该特定技术的任何示例。这并不一定意味着该方法无效，但也许自从 CSS-Tricks 在 2015 年发布他们的教程以来，API 已经发生了变化？三年的加工时间可能是永恒的。

无论如何，我知道我之前已经成功使用过 Gulp/browserSync/SASS，所以我从我的一个旧 gulpfile 中挖掘出与您的情况相关的代码。

//watch task
gulp.task('watch', function () {
    //spin up dev server
    browserSync.init({
        server: {
            baseDir: "./"
        },
    });

    //when scss files change, run sass task first and reload browserSync second
    gulp.watch('./sass/*.scss', ['sass']).on('change', function () {
        browserSync.reload();
    });

});

//call watch task
gulp.task('default', ['watch']);

基本上，当您调用watch 任务时，它会立即启动开发服务器，然后侦听对您的 scss 文件的更改。当检测到更改时，它会调用sass 任务作为依赖项并运行您拥有的任何用于预处理的代码（您说这些代码当前在您的文件中工作）。在sass任务完成后，通过.on方法调用browserSync.reload。

我已经有一段时间没有使用这个特定的配置了，但如果它有效，请告诉我，如果无效，我很乐意与您一起解决它。对于任何开发人员来说，它都是很好的样板。

编辑： 上面的 sn-p 取自一个更大的 gulpfile，经过第二次检查，我发现了一些阻止它在独立环境中工作的部分。编辑 sn-p 以纠正此问题。

【讨论】：

感谢@A.Lamansky 的回复。不幸的是，您的实施似乎对我也不起作用。这次控制台输出是：[10:45:34] Starting 'sass'... [10:45:34] Finished 'sass' after 4.85 ms [Browsersync] Reloading Browsers... 但浏览器仍然没有重新加载。
查看我的答案的编辑。新版本对你有用吗？我刚刚在我的机器上测试了它，它在这里完美运行。
嗨@A.Lamansky，你的解决方案仍然对我不起作用。我得到的唯一区别是控制台窗口中的[Browsersync] Reloading Browsers... 消息。不幸的是，浏览器仍然没有重新加载。你有没有机会冷压缩你的解决方案并与我分享，以便我可以在本地运行它并验证我做错了什么？
这是我 Google 云端硬盘上 zip 的链接。请注意，我没有包含 node_modules 文件夹，因此您需要先运行 npm install。一旦你这样做了，在browsersync文件夹中打开一个终端并运行gulp命令来启动开发服务器。尝试编辑包含的 SCSS 文件进行测试。 drive.google.com/file/d/1pZpVZHt09NONudCmGT6X3L8a7uwUhQf5/…
嗨@A.Lamansky。谢谢你的帮助。通过将您的代码与我的代码进行比较，我终于发现我的解决方案一切正常。唯一的区别是 - 我的 HTML 文件是 UTF-16 编码的。这一定是导致浏览器同步代码出现问题的原因。我不确定我是如何设法用错误的编码创建这个文件的，因为我记得，我在 VS Code 中创建了所有文件。我已经尝试过，但无法再次重现。

【解决方案2】：

我正在运行一个 MAMP 网站，这对我有用

//define task
gulp.task('bsync', function () {
    //spin up dev server
    browserSync.init({
      proxy: "dev.sitename.local",
      hostname: "dev.sitename.local",
      port: 3000, //even if apache is running on 80 or something else
    });

    //when css files change, reload browserSync 
    gulp.watch('./css/*.css').on('change', function () {
        browserSync.reload();
    });

});

//call task with 'gulp runbsync'
gulp.task('runbsync', ['bsync']);

https://gist.github.com/petergus/31d75a5145e062d4eaa42eb04ce23aea

【讨论】：