Question

这是我的gulpfile.js

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

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

然后我开始＆＃34; gulp browser-sync＆＃34;它在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

gulp browser-sync不起作用

1 个答案: