gulp 浏览器同步不起作用

Question

这是我的 gulpfile.js

var gulp = require('gulp'),
    browserSync = require('browser-sync');

gulp.task('browser-sync', function() {
browserSync({
    server: {
     baseDir: './',
   }
    })
})

然后我开始“gulp browser-sync”并监听端口 3000 我在浏览器中打开了网址。

在编辑 html 或 css 并保存文档时，浏览器不会重新加载。

如果我使用浏览器同步来监控文件，它可以工作。

我的 gulpfile.js 有什么问题吗？

Answer 1

您需要自己触发重新加载。我推荐这样的设置；观察文件的变化，运行优化任务，然后在管道结束时调用 reload 方法。像这样的：

gulp.task('styles', function() {
    return gulp.src('assets/sass/*.scss')
        .pipe(sass())
        .pipe(csso())
        .pipe(gulp.dest('web/css'))
        .pipe(browserSync.reload({stream:true})); // Make sure this is called!
});

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

gulp.task('watch', ['browser-sync'], function() {
    gulp.watch(['assets/sass/*.scss'], ['styles']);
});

编辑：要重新加载您的 HTML，请使用如下任务：

gulp.task('watch', ['browser-sync'], function () {
    // add browserSync.reload to the tasks array to make
    // all browsers reload after tasks are complete.
    gulp.watch("html/*.html", ['htmlTasks', browserSync.reload]);
});

从这里：http://www.browsersync.io/docs/gulp/#gulp-reload