Stuck at Reloading Browsers... #1065

Su7ech · 2016-04-14T05:25:06Z

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

Browsersync use-case

API
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}

The text was updated successfully, but these errors were encountered:

jmxx · 2016-04-28T17:23:17Z

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 · 2016-04-28T18:16:53Z

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.

uinz · 2016-06-12T17:26:24Z

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 · 2016-07-10T23:09:34Z

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

tvorex · 2016-10-17T11:20:26Z

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

karli2 · 2017-01-08T09:01:22Z

@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 · 2017-01-09T04:05:26Z

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

sera2007 · 2017-04-13T07:46:11Z

@tvorex Thanks!!!

estevancarlos · 2017-10-01T23:58:14Z

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 · 2017-12-02T07:39:50Z

@tvorex it works me also Thanks alottt

djm158 · 2018-01-24T21:31:40Z

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

Browsersync use-case

API
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 · 2018-02-28T20:03:47Z

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

hari03 · 2018-05-13T07:35:19Z

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

AlexKom9 · 2018-10-22T15:25:06Z

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

Thanks a lot !!

camslice · 2018-11-21T09:27:14Z

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 · 2018-12-17T13:42:20Z

I also have the same problem

econavi · 2018-12-27T21:20:15Z

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 · 2019-04-30T11:47:33Z

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 · 2019-07-09T10:48:15Z

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 · 2019-08-20T08:22:32Z

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 · 2020-03-12T11:11:40Z

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 · 2020-07-29T11:52:55Z

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

Worked for me, Thanks @tvorex , you saved the day. 😄 👍

italofgcoura · 2020-10-29T17:55:23Z

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

Thank you!

anthonyarguello96 · 2021-01-19T20:28:02Z

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!

kamil079 · 2021-11-18T11:27:32Z

@anthonyarguello96
I have error:
ReferenceError: styles is not defined
in your watch function
please replay

MuriWolf · 2022-08-22T01:18:34Z

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.

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.

Worked here. Big thanks!

CoreyCole mentioned this issue Jun 13, 2016

HTML watch stuck on "Reloading Browsers..." FountainJS/generator-fountain-webapp#54

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stuck at Reloading Browsers... #1065

Stuck at Reloading Browsers... #1065

Su7ech commented Apr 14, 2016 •

edited by shakyShane

jmxx commented Apr 28, 2016 •

edited by shakyShane

jmxx commented Apr 28, 2016 •

edited by shakyShane

uinz commented Jun 12, 2016 •

edited

dcalhoun commented Jul 10, 2016

tvorex commented Oct 17, 2016

karli2 commented Jan 8, 2017

gfadavid commented Jan 9, 2017

sera2007 commented Apr 13, 2017

estevancarlos commented Oct 1, 2017

aerosunilkumar commented Dec 2, 2017

djm158 commented Jan 24, 2018 •

edited

trapless commented Feb 28, 2018

hari03 commented May 13, 2018

AlexKom9 commented Oct 22, 2018

camslice commented Nov 21, 2018

chengjinshan commented Dec 17, 2018

econavi commented Dec 27, 2018

flothoni commented Apr 30, 2019

BunnyMan1 commented Jul 9, 2019

CannonFodderr commented Aug 20, 2019

akshuvo commented Mar 12, 2020

SurajVerma commented Jul 29, 2020

italofgcoura commented Oct 29, 2020

anthonyarguello96 commented Jan 19, 2021

kamil079 commented Nov 18, 2021

MuriWolf commented Aug 22, 2022

Stuck at Reloading Browsers... #1065

Stuck at Reloading Browsers... #1065

Comments

Su7ech commented Apr 14, 2016 • edited by shakyShane

Issue details

Steps to reproduce/test case

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

Affected platforms

Browsersync use-case

If CLI, please paste the entire command below

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

jmxx commented Apr 28, 2016 • edited by shakyShane

jmxx commented Apr 28, 2016 • edited by shakyShane

uinz commented Jun 12, 2016 • edited

dcalhoun commented Jul 10, 2016

tvorex commented Oct 17, 2016

karli2 commented Jan 8, 2017

gfadavid commented Jan 9, 2017

sera2007 commented Apr 13, 2017

estevancarlos commented Oct 1, 2017

aerosunilkumar commented Dec 2, 2017

djm158 commented Jan 24, 2018 • edited

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

Affected platforms

Browsersync use-case

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

trapless commented Feb 28, 2018

hari03 commented May 13, 2018

AlexKom9 commented Oct 22, 2018

camslice commented Nov 21, 2018

chengjinshan commented Dec 17, 2018

econavi commented Dec 27, 2018

flothoni commented Apr 30, 2019

BunnyMan1 commented Jul 9, 2019

CannonFodderr commented Aug 20, 2019

akshuvo commented Mar 12, 2020

SurajVerma commented Jul 29, 2020

italofgcoura commented Oct 29, 2020

anthonyarguello96 commented Jan 19, 2021

kamil079 commented Nov 18, 2021

MuriWolf commented Aug 22, 2022

Su7ech commented Apr 14, 2016 •

edited by shakyShane

jmxx commented Apr 28, 2016 •

edited by shakyShane

jmxx commented Apr 28, 2016 •

edited by shakyShane

uinz commented Jun 12, 2016 •

edited

djm158 commented Jan 24, 2018 •

edited