New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Doesn't reload a browser #392

Open
wzup opened this Issue Jan 14, 2015 · 24 comments

Comments

Projects
None yet
@wzup

wzup commented Jan 14, 2015

The plugin doesn't reload a browser.
In console it says [BS] Reloading Browsers... but nothing is reloaded.
Neither it works with injected script tag, nor without.
Nodemon works like a charm but not browser-sync.
Here is my gulpfile.js:

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    browserify = require('gulp-browserify'),
    nodemon = require('gulp-nodemon')
    compass = require('gulp-compass'),
    gulpif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    // minifyHTML = require('gulp-minify-html'),
    concat = require('gulp-concat'),
    browserSync = require('browser-sync'),
    path = require('path');

var port,
    env,
    nodemonConf,
    scssSources,
    scssStyle,
    jsSources,
    templateSources,
    outputDir;

port = 3000;
env = 'development';

nodemonConf = {
    script: "index.js",
    ext: 'js html dust json scss',
    env: { 'NODE_ENV': env },
    nodeArgs: ['--debug']
}

if (env==='development') {
    scssStyle = 'expanded';
} else {
    scssStyle = 'compressed';
}

// browserSync({
//     port: 8000,
//     baseDir: "./"
// });

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

gulp.task('dev', function() {
    nodemon(nodemonConf)
        .on('restart', function () {
            browserSync.reload();
            console.log('== Restarted! ==');
        });
});

gulp.task('default', ["browser-sync", "dev"]);

I did as tutorial says. Why it doesn't work?

@shakyShane

This comment has been minimized.

Show comment
Hide comment
@shakyShane
Contributor

shakyShane commented Jan 14, 2015

@wzup

This comment has been minimized.

Show comment
Hide comment
@wzup

wzup Jan 14, 2015

The snippet is injected successfully.
Now the problem is that the browser begins to reload and doesn't finish. And so that the changes cannot be applied.

Why? What is wrong?

Changed gulpfile.js:

browserSync({
    proxy: "localhost:8000",
    open: false
});

gulp.task('dev', function() {
    nodemon(nodemonConf)
        .on('restart', function () {
            browserSync.reload();
            console.log('== Restarted! ==');
        });
});

// gulp.task('default', ["browser-sync", "dev"]);
gulp.task('default', ["dev"]);

wzup commented Jan 14, 2015

The snippet is injected successfully.
Now the problem is that the browser begins to reload and doesn't finish. And so that the changes cannot be applied.

Why? What is wrong?

Changed gulpfile.js:

browserSync({
    proxy: "localhost:8000",
    open: false
});

gulp.task('dev', function() {
    nodemon(nodemonConf)
        .on('restart', function () {
            browserSync.reload();
            console.log('== Restarted! ==');
        });
});

// gulp.task('default', ["browser-sync", "dev"]);
gulp.task('default', ["dev"]);
@bravewick

This comment has been minimized.

Show comment
Hide comment
@bravewick

bravewick Jun 2, 2015

Did you had any luck with that cause it looks like I have similar issue. I am running browser-sync@2.7.6. I am getting "Reloading browsers ..." log message but the browser does not reload. It can happen that it reloads only once (the first time).

bravewick commented Jun 2, 2015

Did you had any luck with that cause it looks like I have similar issue. I am running browser-sync@2.7.6. I am getting "Reloading browsers ..." log message but the browser does not reload. It can happen that it reloads only once (the first time).

@rjaguilar

This comment has been minimized.

Show comment
Hide comment
@rjaguilar

rjaguilar Jun 2, 2015

I am getting the same issue as @bravewick with same version. log message says "Reloading Browsers..." but doesn't reload the page. When I refresh manually I can see the changes.

If I run Browserync via command-line it works though...

rjaguilar commented Jun 2, 2015

I am getting the same issue as @bravewick with same version. log message says "Reloading Browsers..." but doesn't reload the page. When I refresh manually I can see the changes.

If I run Browserync via command-line it works though...

@bravewick

This comment has been minimized.

Show comment
Hide comment
@bravewick

bravewick Jun 2, 2015

I figured it out. I was responding with just 200 (serverside) and that means no body tag for browser-sync to inject the script tag. @rjaguilar maybe you have similar issue ?

bravewick commented Jun 2, 2015

I figured it out. I was responding with just 200 (serverside) and that means no body tag for browser-sync to inject the script tag. @rjaguilar maybe you have similar issue ?

@Ciwan1859

This comment has been minimized.

Show comment
Hide comment
@Ciwan1859

Ciwan1859 Jun 7, 2015

I have this issue too, I even asked on Stackoverflow, but nothing. I'm on Windows 8.1 Pro.

Ciwan1859 commented Jun 7, 2015

I have this issue too, I even asked on Stackoverflow, but nothing. I'm on Windows 8.1 Pro.

@evenfrost

This comment has been minimized.

Show comment
Hide comment
@evenfrost

evenfrost Aug 4, 2015

I was facing the same issue and managed to temporarily settle it with providing a delay to calling Browsersync stuff on nodemon's start and restart events. You can see my gulp config here.
Though it may be just a workaround, without such delaying my browser just hangs with reloading state (and only manual reload helps).

evenfrost commented Aug 4, 2015

I was facing the same issue and managed to temporarily settle it with providing a delay to calling Browsersync stuff on nodemon's start and restart events. You can see my gulp config here.
Though it may be just a workaround, without such delaying my browser just hangs with reloading state (and only manual reload helps).

@eric-dango

This comment has been minimized.

Show comment
Hide comment
@eric-dango

eric-dango Aug 16, 2015

@evenfrost I had a similar issue and ended up by removing stream: false in https://github.com/evenfrost/esnext/blob/master/gulpfile.js#L218

eric-dango commented Aug 16, 2015

@evenfrost I had a similar issue and ended up by removing stream: false in https://github.com/evenfrost/esnext/blob/master/gulpfile.js#L218

@evenfrost

This comment has been minimized.

Show comment
Hide comment
@evenfrost

evenfrost Aug 16, 2015

@eric-dango Doesn't seem to work for me. Would you mind sharing your config to see if there are any differences?

evenfrost commented Aug 16, 2015

@eric-dango Doesn't seem to work for me. Would you mind sharing your config to see if there are any differences?

@eric-dango

This comment has been minimized.

Show comment
Hide comment
@eric-dango

eric-dango Aug 16, 2015

@evenfrost Sorry. I still have this issue intermittently reproducible after I made my comment. Still need to put a delay on that. Please ignore me.

eric-dango commented Aug 16, 2015

@evenfrost Sorry. I still have this issue intermittently reproducible after I made my comment. Still need to put a delay on that. Please ignore me.

@beebase

This comment has been minimized.

Show comment
Hide comment
@beebase

beebase Aug 19, 2015

For me it worked after setting BROWSER_SYNC_RELOAD_DELAY= 2000
Node just wasn't ready when browser sync kicked in again after 500.

Try setting some logs and check when they are fired.

image

delay set to 2000
image

delay set to 500 (BS starts before Node is ready)
image

beebase commented Aug 19, 2015

For me it worked after setting BROWSER_SYNC_RELOAD_DELAY= 2000
Node just wasn't ready when browser sync kicked in again after 500.

Try setting some logs and check when they are fired.

image

delay set to 2000
image

delay set to 500 (BS starts before Node is ready)
image

@dacodekid

This comment has been minimized.

Show comment
Hide comment
@dacodekid

dacodekid Sep 8, 2015

Just set BrowserSync's reloadDelay property to some number that works for you. Below is my setup (using Gulp 4.0).

'use strict';

var gulp      = require('gulp'),
    sync      = require('browser-sync').create(),
    nodemon   = require('gulp-nodemon');


gulp.task('default', gulp.parallel(taskNodemon, taskSync));

function taskSync() {
  sync.init(null, {
    proxy: "http://localhost:3000",
    port: 4000,
    files: ["public/**/*.*"],
    browser: "google chrome",
    reloadDelay: 1000,
  });
}

function taskNodemon() {
  return nodemon({
    script: 'index.js'
  }).on('restart', function() {
    sync.reload();
  });
}

dacodekid commented Sep 8, 2015

Just set BrowserSync's reloadDelay property to some number that works for you. Below is my setup (using Gulp 4.0).

'use strict';

var gulp      = require('gulp'),
    sync      = require('browser-sync').create(),
    nodemon   = require('gulp-nodemon');


gulp.task('default', gulp.parallel(taskNodemon, taskSync));

function taskSync() {
  sync.init(null, {
    proxy: "http://localhost:3000",
    port: 4000,
    files: ["public/**/*.*"],
    browser: "google chrome",
    reloadDelay: 1000,
  });
}

function taskNodemon() {
  return nodemon({
    script: 'index.js'
  }).on('restart', function() {
    sync.reload();
  });
}
@beebase

This comment has been minimized.

Show comment
Hide comment
@beebase

beebase Sep 10, 2015

Thanks..much cleaner.

beebase commented Sep 10, 2015

Thanks..much cleaner.

@rolandjitsu

This comment has been minimized.

Show comment
Hide comment
@rolandjitsu

rolandjitsu Dec 9, 2015

I had the same issue and adding a reloadDelay option seems to work. That's probably because the server takes a little to restart and be online and since BS just proxies to the server it fails to reload because it probably get's a 400 or something from the proxied server. An idea would be to have BS retry every 200ms to check if the proxied server is back online and show a message if something is going bad.

rolandjitsu commented Dec 9, 2015

I had the same issue and adding a reloadDelay option seems to work. That's probably because the server takes a little to restart and be online and since BS just proxies to the server it fails to reload because it probably get's a 400 or something from the proxied server. An idea would be to have BS retry every 200ms to check if the proxied server is back online and show a message if something is going bad.

@hellobrian

This comment has been minimized.

Show comment
Hide comment
@hellobrian

hellobrian commented Dec 31, 2015

+1 for reloadDelay, thanks!

@rstoenescu

This comment has been minimized.

Show comment
Hide comment
@rstoenescu

rstoenescu Feb 25, 2016

Just noticed something: I inserted a class name to html tag and the Browsersync script didn't get inserted. So avoid altering html tag.

rstoenescu commented Feb 25, 2016

Just noticed something: I inserted a class name to html tag and the Browsersync script didn't get inserted. So avoid altering html tag.

@lucian303

This comment has been minimized.

Show comment
Hide comment
@lucian303

lucian303 Feb 27, 2016

I'm experiencing this using brunch and the brunch plugin. The JS works and I even get an error when killing the brunch server, but it never, ever reloads or even recompiles at all.

lucian303 commented Feb 27, 2016

I'm experiencing this using brunch and the brunch plugin. The JS works and I even get an error when killing the brunch server, but it never, ever reloads or even recompiles at all.

josephco added a commit to CasperSleep/nightshade that referenced this issue Mar 8, 2016

Add reloadDelay to get html to reload
Without it html reload doesn't kick off properly
BrowserSync/browser-sync#392
@Dizzzy

This comment has been minimized.

Show comment
Hide comment
@Dizzzy

Dizzzy Mar 11, 2016

reloadDelay didn't work for me. What seems to do the trick is doing both a task reload and an event based reload at the same time (basically use both the methods in the docs), like this:

gulp.task('html-watch', ['html'], browserSync.reload);

gulp.task('watch', function() {
    gulp.watch(app.files.html, ['html-watch']).on('change', function(evt) {
        browserSync.reload();
    });
});

Dizzzy commented Mar 11, 2016

reloadDelay didn't work for me. What seems to do the trick is doing both a task reload and an event based reload at the same time (basically use both the methods in the docs), like this:

gulp.task('html-watch', ['html'], browserSync.reload);

gulp.task('watch', function() {
    gulp.watch(app.files.html, ['html-watch']).on('change', function(evt) {
        browserSync.reload();
    });
});

@frontEnd-fucker

This comment has been minimized.

Show comment
Hide comment
@frontEnd-fucker

frontEnd-fucker Aug 29, 2016

+1 for reloadDelay, thanks!

frontEnd-fucker commented Aug 29, 2016

+1 for reloadDelay, thanks!

@ashishagaikwad

This comment has been minimized.

Show comment
Hide comment
@ashishagaikwad

ashishagaikwad Sep 7, 2016

check if your page has a body tag because browser-sync works only with files having body tag

ashishagaikwad commented Sep 7, 2016

check if your page has a body tag because browser-sync works only with files having body tag

@midhunadarvin

This comment has been minimized.

Show comment
Hide comment
@midhunadarvin

midhunadarvin Sep 28, 2016

@ashishagaikwad For me the problem was that in my html file , there was a commented body tag above my actual body tag. Browser-sync injected the script tag after the commented body tag which made it render as commented.

midhunadarvin commented Sep 28, 2016

@ashishagaikwad For me the problem was that in my html file , there was a commented body tag above my actual body tag. Browser-sync injected the script tag after the commented body tag which made it render as commented.

@Iambecomeroot

This comment has been minimized.

Show comment
Hide comment
@Iambecomeroot

Iambecomeroot Nov 10, 2016

I had a similar problem. My problem was I had nodemon restarting every time I saved a js file, including those in /source, which trigger browserSync.reaload(). Since the server restarted, somehow the request got lost. I had to set nodemon to ignore /source and /public.

Iambecomeroot commented Nov 10, 2016

I had a similar problem. My problem was I had nodemon restarting every time I saved a js file, including those in /source, which trigger browserSync.reaload(). Since the server restarted, somehow the request got lost. I had to set nodemon to ignore /source and /public.

@hanzichi

This comment has been minimized.

Show comment
Hide comment
@hanzichi

hanzichi Jan 4, 2017

@ashishagaikwad It's the right point which really puzzle me all day! But I wonder browser-sync should give some kind warnings

hanzichi commented Jan 4, 2017

@ashishagaikwad It's the right point which really puzzle me all day! But I wonder browser-sync should give some kind warnings

@dagoodma

This comment has been minimized.

Show comment
Hide comment
@dagoodma

dagoodma Aug 8, 2017

Thanks @Dizzzy ! I've been struggling with browserSync issues for weeks and decided to finally spend 2 or 3 hours yesterday to figure it out. Your approach was the only one that worked. I also used the reloadDebounce option too.

dagoodma commented Aug 8, 2017

Thanks @Dizzzy ! I've been struggling with browserSync issues for weeks and decided to finally spend 2 or 3 hours yesterday to figure it out. Your approach was the only one that worked. I also used the reloadDebounce option too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment