gulp browser-sync不起作用

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

您需要自己触发重新加载.我建议像这样的设置; 观察文件是否有变化,运行优化任务,然后在管道末端调用重载方法.像这样的东西:

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