Doesn't reload a browser

[wzup]

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]

Have you checked https://github.com/shakyShane/browser-sync#requirements

[wzup]

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]

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]

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]

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]

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

[evenfrost]

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]

@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]

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

[eric-dango]

@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]

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.

delay set to 2000

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

[dacodekid]

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]

Thanks..much cleaner.

[rolandjitsu]

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]

+1 for reloadDelay, thanks!

[rstoenescu]

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]

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.

[Dizzzy]

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]

+1 for reloadDelay, thanks!

[ashishagaikwad]

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

[midhunadarvin]

@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.

[MarcelRobitaille]

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.

[lessfish]

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

[dagoodma]

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.

[joaosantos]

Thank You @bravewick, this work for me.

[giovannipds]

Incredible... I had a <?php /* data-container="body" */ ?> line and that f*cked all up. Thanks @midhunadarvin for pointing that out.

--> PAY ATTENTION IF YOU HAVE OTHER "BODY"'S IN THE CODE <--

[trusktr]

Shouldn't the script tag inject regardless if a body tag is present? I had this in my html file, which wasn't working:

<script type="module" src="./dist/multiple.js"></script>

and I had to change it to

<body>
    <script type="module" src="./dist/multiple.js"></script>
</body>

after finding my way to this issue.

Is there a problem if it is injected regardless of body tag?

[richie50]

+100000000 for reloadDelay , spent days on this issue.

[ziyamamedov]

My html was missing the body tag! Finally I've found the reason

[atulkumaryadav24]

I my case I just forgot to write browser-sync "start" so that's why it was not working. Give me a like if it helps.