CODEWITHSUNDEEP
javascriptgulp
Marian Rick
Marian Rick

Reputation: 3440

Gulp reload browser after task is finished

Inside my gulp task, I want to fire reload my browser using browserSync.reload after the tasks have been finished. Currently my gulpfile.js looks like this:

gulp.task('serve', ['build'], function () {

    browserSync.init({
        notify: false,
        server: "./" + dist
    });

    gulp.watch("/**/*.html", ['html']).on('change', browserSync.reload);
    gulp.watch("/**/*.md", ['html']).on('change', browserSync.reload);

});

Currently the first thing gulp does is [BS] Reloading Browsers... and then [12:54:12] Starting 'html'....

How can I change this to first run html and on finish browserSync.reload?

Upvotes: 0

Views: 1912

Answers (2)

Ania Brakowska
Ania Brakowska

Reputation: 21

gulp.task('reload', function (done) {
    browserSync.reload();
    done();
});
 
gulp.task('bs', function() {

    browserSync.init({
        proxy: "http://strona.pl/"
    });

    gulp.watch("./css/*.scss", gulp.series('sass', 'deploy', 'reload'));

    gulp.watch('./**/*.php').on('change', browserSync.reload);
    gulp.watch('./*.php').on('change', browserSync.reload);
});

Upvotes: 2

dloeda
dloeda

Reputation: 1548

I think you don't need the on.change listener, you can specify the reload like this:

gulp.task('serve', ['build'], function () {

    browserSync.init({
        notify: false,
        server: "./" + dist
    });

    gulp.watch("/**/*.html", ['html', browserSync.reload]);
    gulp.watch("/**/*.md", ['html', browserSync.reload]);

});

EDIT

As Mark said, running both tasks in parrallel could generate some errors, a better solution could be:

gulp.task('serve', ['build'], function () {
    browserSync.init({
        notify: false,
        server: "./" + dist
    });

    gulp.watch("/**/*.html", ['reload']);
    gulp.watch("/**/*.md", ['reload']);
});

gulp.task('reload', ['html'], function () {
    browserSync.reload();
});

Upvotes: 1

Related Questions