Browser-sync: Stuck at Reloading Browsers...

[Su7ech]

Issue details

I'm setting up a new project and I have the following gulpfule.js setup:

var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var prefix      = require('gulp-autoprefixer');
var pug        = require('gulp-pug');
var newer       = require('gulp-newer');
var images      = require('gulp-imagemin');
var uglify      = require('gulp-uglify');
// var deploy      = require('gulp-gh-pages');

var imgSrc      = 'assets/images/**';
var imgDest     = '_site/assets/images';

// Browser Sync
gulp.task('serve', ['sass', 'pug', 'images', 'compress'], function() {
  browserSync.init({
    server: {
      baseDir: '_site/'
    },
    notify: false 
  });
  gulp.watch('assets/sass/**', ['sass']);
  gulp.watch(['index.pug', '_includes/*.pug', '_layouts/*.pug'], ['pug']);
  gulp.watch('assets/js/*.js', ['compress', browserSync.reload]);
  gulp.watch('assets/images/**', ['images']);
  gulp.watch('_site/*.html').on('change', browserSync.reload);
});

// Compile sass
gulp.task('sass', function() {
  return gulp.src('assets/sass/main.sass')
    .pipe(sass({
      includePaths: ['assets/sass/bootstrap/', 'assets/sass/bootstrap/mixins']
    }))
    .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(gulp.dest('_site/assets/css'))
    .pipe(browserSync.stream());
});

// Compile pug to HTML
gulp.task('pug', function() {
  return gulp.src('*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('_site/'));
});

// Compile JS
gulp.task('compress', function() {
  return gulp.src('assets/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('_site/assets/js'));
});

// Compress Images
gulp.task('images', function() {
  return gulp.src(imgSrc)
    .pipe(newer(imgDest))
    .pipe(images())
    .pipe(gulp.dest(imgDest));
});

gulp.task('default', ['serve']);

What I'm seeing when I run it is if I make a change to my 'index.pug' (formerly Jade) file and save, I see in my terminal that it attempts to reload the browser, but it just hangs there.

Specifically, I see this:

       Local: http://localhost:3000
    External: http://192.168.1.8:3000
 ------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.8:3001
 ------------------------------------
[BS] Serving files from: _site/
[22:15:18] Starting 'pug'...
[22:15:18] Finished 'pug' after 8.8 ms
[BS] Reloading Browsers...

Any help on this would be greatly appreciated.

Thank you

Steps to reproduce/test case

_Please provide necessary steps for reproduction of this issue, or better the
reduced test case (without any external dependencies)_.

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.12.3 ]
• Node [ 5.6.0 ]

• Npm [ 3.6.0 ]

  Affected platforms

• [ ] linux

• [X] windows
• [ ] OS X
• [ ] freebsd
• [ ] solaris

• [ ] other _(please specify which)_

  Browsersync use-case

• [ ] API

• [X] Gulp
• [ ] Grunt
• [ ] CLI
  

  If CLI, please paste the entire command below

{cli command here}

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

{Browsersync init code here}

[jmxx]

I'm having same issue. I'm using browser sync with gulp and is stopping at Realoading Browsers...

This is my gulpfile.babel.js

'use strict';

import gulp         from 'gulp';
import browserify   from 'browserify';
import browserSync  from 'browser-sync';
import babelify     from 'babelify';
import source       from 'vinyl-source-stream';
import stylus       from 'gulp-stylus';
import postStylus   from 'poststylus';
import sourcemaps   from 'gulp-sourcemaps';
import lost         from 'lost';
import autoprefixer from 'autoprefixer';

//const bs = browserSync.create();

gulp.task('html', () => {
  return gulp.src('./src/index.html')
    .pipe(gulp.dest('./dist'));
});

gulp.task('stylus', () => {
  return gulp.src('./src/styl/app.styl')
    .pipe(sourcemaps.init())
    .pipe(stylus({
      use: [
        postStylus([lost, autoprefixer])
      ]
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist/css'))
    .pipe(browserSync.stream());
});

gulp.task('es6:react', () => {
  return browserify({
    entries: './src/js/index.jsx',
    extensions: ['.jsx'],
    debug: true
  })
    .transform(babelify)
    .bundle()
    .pipe(source('app.js'))
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('serve', (done) => {
  browserSync.init({
    server: './dist'
  }, done);
});

gulp.task('watch:stylus', () => {
  return gulp.watch('./src/styl/**/*.styl', gulp.series('stylus'));
});

gulp.task('watch:html', () => {
  return gulp.watch('./src/**/*.html', gulp.series('html', browserSync.reload));
});

gulp.task('watch:es6', () => {
  return gulp.watch('./src/js/**/*.jsx', gulp.series('es6:react', browserSync.reload));
});

gulp.task('watch', gulp.parallel('watch:html', 'watch:es6', 'watch:stylus'));

gulp.task('default', gulp.series('html', 'stylus', 'es6:react', 'serve', 'watch'));

And this is my package.json

{
  "name": "react-babel",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.babel.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [ "es2015" ]
  },
  "devDependencies": {
    "autoprefixer": "^6.3.6",
    "babel": "^6.5.2",
    "babel-core": "^6.7.7",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.2.0",
    "browser-sync": "^2.12.2",
    "browserify": "^13.0.0",
    "gulp": "github:gulpjs/gulp#4.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-stylus": "^2.3.1",
    "lost": "^6.7.2",
    "poststylus": "^0.2.3",
    "vinyl-source-stream": "^1.1.0"
  },
  "dependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1"
  }
}

Please specify which version of Browsersync, node and npm you're running
Browsersync [ 2.12.5 ]
Node [ v5.11.0 ]
Npm [ 3.8.7 ]

The code is running on OS X

Thank you!

[jmxx]

In my case, the problem was with an update in Gulp4, specifically this commit: https://github.com/gulpjs/gulp/commit/6c03475e1a39d18c139b4d56baa1c14a587f9f4a

And I solve it modifying my watch tasks like this:

gulp.task('watch:es6', () => {
  return gulp.watch('./src/js/**/*.jsx', gulp.series('es6:react', function (done) {
    browserSync.reload();
    done();
  }));
});

I hope that this can help someone.

[uinz]

gulp.task('es2015:watch', ['es2015'], function() {
    reload()
})

gulp.task('es2015', function() {
    // do not return
    gulp.src('./src/es2015/**/*.js')
        .pipe(babel())
        .pipe(gulp.dest('./public/javascripts'))
})

gulp.task('default', ['stylus', 'es2015'], function() {
    browserSync.init({
        proxy: 'localhost:8080'
    })
    gulp.watch('./src/stylus/**/*.styl', ['stylus'])
    gulp.watch('./src/es2015/**/*.js', ['es2015:watch'])
})

sometimes need return
sometimes not

[dcalhoun]

@jmxx thank you so much! You are absolutely correct.

[tvorex]

"browser-sync" only works when there is the tag "body"

[karli2]

@tvorex saved my day. Yesterday some time I lost the reload browsers functionality. Today I searched and tried different steps, however I was not able to get the browser to reload. I did not had a missing body tag, but I found that if there are two body tags (one was html-commented) also destroys the capability of reloading.

[gfadavid]

@tvorex thank you so much!! This work for me.

[sera2007]

@tvorex Thanks!!!

[estevancarlos]

This has been a really annoying problem. The solution proposed here doesn't seem to work on my end. Any plans to fix it officially?

[aerosunilkumar]

@tvorex it works me also Thanks alottt

[djm158]

I am also having this issue.

stuck here:

Please specify which version of Browsersync, node and npm you're running

• Browsersync [ 2.23.6 ]
• Node [ 8.9.4 ]
• Npm [ 5.6.0 ]

Affected platforms

• [ ] linux
• [x] windows
• [ ] OS X
• [ ] freebsd
• [ ] solaris
• [ ] other _(please specify which)_

Browsersync use-case

• [ ] API
• [x] Gulp
• [ ] Grunt
• [ ] CLI

for all other use-cases, (gulp, grunt etc), please show us exactly how you're using Browsersync

my Gulpfile.js

const gulp = require('gulp')
const browserSync = require('browser-sync').create();

gulp.task('serve', () => {
    browserSync.init({
        server: './www'
    });

    gulp.watch("./www/index.html").on('change', browserSync.reload);
});

file i'm watching:

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
                <p>hello world</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

[trapless]

@karli2 Pointed out my issue. Only a single body can exist, commented included.

[hari03]

In my case, I didn't have my local server running / WAMP running. Stupid mistake. Hope it helps someone.

[AlexKom9]

"browser-sync" only works when there is the tag "body"

Thanks a lot !!

[camslice]

So could it be that any unclosed tag that is a child of the <body> could result in a compile error and trigger this issue?

[chengjinshan]

I also have the same problem

[econavi]

I have this problem too, but only in goggle chrome.
And If i set up domain of socket like this:

socket: {
    domain: 'localhoooooooost:8080'
}

Reloading the page works fine.
But then i see errors in my console.

[flothoni]

I found something. For my case, I have 2 firefox windows open. BrowserSync open the tab into the second window. If I move it into the first, it work perfectly.

Hope this will help in some cases.

[BunnyMan1]

Changing the watch function from this:
gulp.watch("./**/*.php", function() { browserSync.reload(); });

to this:
gulp.watch("./**/*.php").on("change", browserSync.reload);

has solved the problem for me.

I had a problem where browserSync got stuck at reloading browsers...
I'm using this for WordPress dev on Local by Flywheel.

[CannonFodderr]

Changing the watch function from this:
gulp.watch("./**/*.php", function() { browserSync.reload(); });

to this:
gulp.watch("./**/*.php").on("change", browserSync.reload);

has solved the problem for me.

I had a problem where browserSync got stuck at reloading browsers...
I'm using this for WordPress dev on Local by Flywheel.

Thanks, this actually works!

[akshuvo]

In my case, the problem was with an update in Gulp4, specifically this commit: gulpjs/gulp@6c03475

And I solve it modifying my watch tasks like this:

gulp.task('watch:es6', () => {
  return gulp.watch('./src/js/**/*.jsx', gulp.series('es6:react', function (done) {
    browserSync.reload();
    done();
  }));
});

I hope that this can help someone.

That's worked for me. Thanks.

[SurajVerma]

"browser-sync" only works when there is the tag "body"

Worked for me, Thanks @tvorex , you saved the day. :smile: :+1:

[italofgcoura]

"browser-sync" only works when there is the tag "body"

Thank you!

[anthonyarguello96]

This solved my problem:

1- Install gulp-cache npm package

npm i gulp-cache

2-Require this package in you gulpfile.js by adding the following line:

const cache = require('gulp-cache');

3- Now you want to create a gulp task that celar the cache using gulp-cahce:

function clearCache(done) { return cache.clearAll(done); }

4- Finally update your watch task, I'll share mine as a reference:

function watch() { browserSync.init({ server: './dist', }); gulp.watch('sass/**/*.scss', gulp.parallel(styles)); gulp.watch('sass/**/*.scss').on('change', clearCache, browserSync.reload); gulp.watch('index.html', gulp.parallel(copyHtml)); gulp.watch('*.html').on('change', clearCache, browserSync.reload); gulp.watch('js/**/*.js', gulp.series(lint, scripts)); gulp.watch('js/**/*.js').on('change', clearCache, browserSync.reload); gulp.watch('img/**/*.jpg', gulp.series(copyImages)); gulp.watch('img/**/*').on('change', clearCache, browserSync.reload); }

If you look closely you'll notice I change each of my of my gulp.watch by adding clearCache to the list of functions to run after change:

gulp.watch('sass/**/*.scss', gulp.parallel(styles)); gulp.watch('sass/**/*.scss').on('change', clearCache, browserSync.reload);

Please let me know if this works for you!