Gulp browser sync not working

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 listened to port 3000 and I opened the URL in the browser.

When editing html or css and the saved document, the browser does not restart.

If I used browser synchronization to monitor files, it works.

Is there something wrong with my gulpfile.js?

Answer 1

You will need to start the reboot yourself. I recommend a setup similar to this; Browse files for changes, run optimization tasks, and then call the reload method at the end of the pipeline. Something like that:

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 the HTML, use the following task:

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