Stuck at Reloading Browsers...

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
• windows
• OS X
• freebsd
• solaris
• other (please specify which)

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}

[tvorex]

“browser-sync” only works when there is the tag “body”

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