BrowserSync / browser-sync

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

Browsersync never loads after updating to gulp 5 #2094

Open umbralOptimatum opened 1 week ago

umbralOptimatum commented 1 week ago

Issue details

After updating to gulp 5, Browsersync becomes unusably slow for my project. None of the images load, though the browser shows it still making requests. Looking at the networks tab, it's constantly making new requests for the same two images, about 50 new requests per second:

Networks tab

Downgrading to gulp 4 makes everything work again. No other direct dependencies were changed.

Steps to reproduce/test case

  1. Update to gulp 5
  2. ???

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

I'm not the one who set up Browsersync on this project, so I'm not sure exactly what's relevant. All of the other references are about the same: watching some directory, which starts a task that is ultimately piped to browserSync.reload({stream: true}).

const browserSync = require('browser-sync');

const dests = {
    base: 'build',
    assets: 'build/assets/',
    // ...
};

gulp.task('browserSync', () => {
    browserSync({
        server: {
            baseDir: dests.base,
        },
        ghostMode: false,
    });
    gulp.watch(srcs.assets, gulp.series('assets'));
    // ...
});

gulp.task('assets', () => gulp.src(srcs.assets)
    .pipe(changed(dests.assets))
    .pipe(gulp.dest(dests.assets))
    .pipe(browserSync.reload({stream: true})));