Gulp-BrowserSync不重新加载页面

Question

I'm following a basic tutorial for Gulp from here and I got stuck on the browser-sync implementation. 我从这里开始学习Gulp的基本教程，并且陷入了浏览器同步的实现中。 I have copied the code exactly as it is in the example, however when I run the watch task, even though sass task executes no problem (new version of the css file is created), the browser doesn't want to refresh! 我已经完全复制了示例中的代码，但是，当我运行watch任务时，即使sass任务没有执行任何问题（创建了新版本的css文件），浏览器也不想刷新！ Here is my code: 这是我的代码：

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
});

And here is my index.html 这是我的index.html

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

My styles.scss files has only one style: 我的styles.scss文件只有一种样式：

body {
    background: blue;
}

And here is the output from the console window when I update the styles.scss 这是我更新styles.scss时控制台窗口的输出

So I can see that the browser-sync is aware of the change being made, but it doesn't reload the page in the browser. 因此，我可以看到browser-sync知道所做的更改，但是它不会在浏览器中重新加载页面。 Why is that? 这是为什么？ I have looked through the comments under the tutorial and no one seemed to face similar issue. 我已经仔细阅读了教程中的评论，似乎没有人遇到类似的问题。 I have also seen couple of other tutorials, but none of them works for me. 我也看过其他一些教程，但是没有一个适合我。 I use latest version of chrome as my default browser, browser-sync version 5.6.0 and gulp version 3.9.1 我使用最新版本的chrome作为默认浏览器，浏览器同步版本5.6.0和gulp版本3.9.1

Answer 1

I've never heard of piping files through browserSync.reload as a way to reload the dev server, and couldn't find any examples of that particular technique in the browserSync documentation . 我从未听说过通过browserSync.reload管道文件作为重新加载开发服务器的方法，并且在browserSync文档中找不到该特定技术的任何示例。 That doesn't necessarily mean that the method is invalid, but maybe the API has changed since CSS-Tricks published their tutorial in 2015? 这不一定意味着该方法无效，但是自CSS-Tricks在2015年发布其教程以来，API可能已更改？ Three years can be an eternity in tooling time. 三年可能是永久的加工时间。

Anyway, I know I've used Gulp/browserSync/SASS successfully before so I dug up the code relevant to your situation from one of my old gulpfiles. 无论如何，我知道我之前已经成功使用过Gulp / browserSync / SASS，所以我从一个旧的gulpfiles中挖掘了与您的情况相关的代码。

//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']);

Basically when you call the watch task it immediately spins up the development server and then listens for changes to your scss files. 基本上，当您调用watch任务时，它会立即启动开发服务器，然后侦听对您的scss文件的更改。 When a change is detected, it calls the sass task as a dependency and runs whatever code you have for preprocessing (which you said is currently working in your file). 当检测到更改时，它将作为依赖项调用sass任务，并运行您要进行预处理的任何代码（您所说的当前正在文件中运行）。 After the sass task is completed, browserSync.reload is called via the .on method. 后sass任务完成后， browserSync.reload是通过所谓的.on方法。

I haven't used this particular configuration in awhile but let me know if it works and if not I'd be happy to troubleshoot it with you. 我已经有一段时间没有使用过这种特殊的配置了，但是请让我知道它是否有效，如果不行，我很乐意与您一起进行故障排除。 It's good boilerplate for any dev to have on hand. 对于任何开发人员来说，这都是一个很好的样板。

EDIT: The above snippet was taken from a much larger gulpfile and upon second inspection I identified some parts that prevented it from working in a standalone context. 编辑：以上代码摘自一个更大的gulpfile，经过第二次检查，我发现了一些阻止其在独立环境下工作的部分。 Edited snippet to correct this. 编辑了片段以更正此问题。

Answer 2

I am running a MAMP site and this worked for me 我正在运行一个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 https://gist.github.com/petergus/31d75a5145e062d4eaa42eb04ce23aea

Gulp-BrowserSync不重新加载页面

问题描述

2 个解决方案

解决方案1
2 已采纳 2018-06-21 00:43:47

解决方案2
0 2018-11-10 11:58:49

Gulp-BrowserSync不重新加载页面

问题描述

2 个解决方案

解决方案1 2 已采纳 2018-06-21 00:43:47

解决方案2 0 2018-11-10 11:58:49

解决方案1
2 已采纳 2018-06-21 00:43:47

解决方案2
0 2018-11-10 11:58:49