Question

我正在学习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

时控制台窗口的输出。

因此，我可以看到浏览器同步知道正在进行的更改，但不会在浏览器中重新加载页面。这是为什么？我已经仔细阅读了教程中的评论，似乎没有人遇到类似的问题。我也看过其他一些教程，但是没有一个适合我。我使用最新版本的chrome作为默认浏览器，浏览器同步版本5.6.0和gulp版本3.9.1

Answer 1

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

无论如何，我知道我之前已经成功使用过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']);

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

我已经有一段时间没有使用这种特殊的配置了，但是请告诉我它是否有效，如果不能解决的话，我很乐意与您一起进行故障排除。对于任何开发人员来说，这都是一个很好的样板。

编辑：上面的摘录摘自一个更大的gulpfile，经第二次检查，我发现了一些阻止其在独立环境下运行的部分。编辑了片段以更正此问题。

Answer 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

Gulp-BrowserSync不重新加载页面

2 个答案: