gulp browser-sync didn't work

Question

this is my gulpfile.js

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

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

then i started "gulp browser-sync" and it listening on port 3000 and i opened the url in browser.

While editing html or css and document saved, the browser won't reload.

If I used browser-sync to monitoring files, it works.

Anything wrong with my gulpfile.js ?

Answer 1

You'll need to trigger the reload yourself. I recommend a setup like this one; watch your files for changes, run the optimisation tasks and then call the reload method at the end of the pipeline. Something like this:

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

Edit: To reload your HTML, use a task like this:

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

From here: http://www.browsersync.io/docs/gulp/#gulp-reload