browser-sync: Doesn't reload a browser

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?

About this issue

Original URL
State: open
Created 9 years ago
Comments: 30 (1 by maintainers)

Commits related to this issue

Add reloadDelay to get html to reload Without it html reload doesn't kick off properly https://github.com/BrowserSync/browser-sync/issues/392 — committed to CasperSleep/nightshade by misscs 8 years ago

Most upvoted comments

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 ?

+34

bravewick on Jun 2, 2015

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

+33

ashishagaikwad on Sep 7, 2016

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

+12

shakyShane on Jan 14, 2015

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

+11

midhunadarvin on Sep 28, 2016

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();
  });
}

+10

dacodekid on Sep 8, 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 on Feb 17, 2015

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 on Mar 11, 2016

@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 on Aug 16, 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 on Dec 9, 2015

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.

atulkumaryadav24 on Aug 25, 2021