browser-sync: 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}
About this issue
- Original URL
- State: open
- Created 8 years ago
- Reactions: 2
- Comments: 26
“browser-sync” only works when there is the tag “body”
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:
I hope that this can help someone.
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.
@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.
That’s worked for me. Thanks.
Thanks a lot !!
Thanks, this actually works!
In my case, I didn’t have my local server running / WAMP running. Stupid mistake. Hope it helps someone.
sometimes need
returnsometimes not