search

BrowserSync / browser-sync

Keep multiple browsers & devices in sync when building websites. https://browsersync.io
https://discord.gg/2d2xUThp
Apache License 2.0
12.17k stars 754 forks source link

Stuck at Reloading Browsers... #1065

Open Su7ech opened 8 years ago

Su7ech commented 8 years ago

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

{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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago 
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 commented 8 years ago

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

tvorex commented 7 years ago

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

karli2 commented 7 years ago

@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 commented 7 years ago

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

sera2007 commented 7 years ago

@tvorex Thanks!!!

estevancarlos commented 6 years ago

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 commented 6 years ago

@tvorex it works me also Thanks alottt

djm158 commented 6 years ago

I am also having this issue.

stuck here: image

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

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 commented 6 years ago

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

hari03 commented 6 years ago

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

AlexKom9 commented 5 years ago

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

Thanks a lot !!

camslice commented 5 years ago

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 commented 5 years ago

I also have the same problem

econavi commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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

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

italofgcoura commented 3 years ago

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

Thank you!

anthonyarguello96 commented 3 years ago

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 commented 2 years ago

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

MuriWolf commented 2 years ago

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.

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!

lionbytes commented 3 weeks ago

I found out that if there's an error in your Sass syntax it will get stuck. I wasted an hour trying to find the cause only to find there was an extra comma within parentheses somewhere in my code, and my IDE didn't even tell me there's an error.