CODEWITHSUNDEEP
javascriptgulpbrowser-sync
Yunti
Yunti

Reputation: 7468

browsersync only refreshes if browser is the active window

I have browser sync setup and running through gulp. Although it automatically refreshes fine when the browser is the active and selected window, it doesn't if not.

This meant I can't have the editor and browser side by side and see continuous updates on the browser as I'm changing code in the editor. I keep on having to select the browser to see an update. Is it possible to get it to work without having the browser as the active window. (on macOS Sierra).

gulpfile task:

// Browser sync server for live reload
gulp.task('browserSync', function () {
    browserSync.init(
        [paths.css + "/**/*.css", paths.js + "*.js", paths.templates + '*.html'], {
            proxy: "localhost:8000",
            browser: 'chrome'
        });

.....

// Watch
gulp.task('watch', ['default'], function () {

    // gulp.watch(paths.sass + '/*.scss', ['styles']);
    gulp.watch(paths.less + '/**/*.less', ['styles']);
    gulp.watch(paths.js + '/*.js', ['scripts']).on("change", reload);
    gulp.watch(paths.images + '/*', ['imgCompression']);
    gulp.watch(paths.templates + '/**/*.html').on("change", reload);

});

Upvotes: 1

Views: 540

Answers (1)

CriCri
CriCri

Reputation: 189

It seems that your problem is not the code itself, but rather the fact that you need to save when in your editor to start the gulp task.

To explain some editors do the saving for you at specified instances. For example WebStorm saves automatically only when one stops writing and waits a specified amount of time to save and/or when focus from the application has shifted to another application, once the focus is shifted the saving is triggered and gulp can pick up on those changes, which in turn updates browsersync.

Hopefully that helps.

Upvotes: 1

Related Questions