Browsersync with gulp refreshing before finished

Question

I'm browsersync in gulp, with the below setup. The issue is that when code changes, browsersync recognizes this and refreshes the page. However, it doesn't wait for the script file to be in the gulp.dest so generally it refreshes automatically and the script file cannot be found, then refreshing again, it's there.

Is there a way to ensure it will wait for the task to fully complete?

var browserSync = require('browser-sync').create(); gulp.task('cleanScripts', function () { return gulp.src('./assets/js', {read: false}) .pipe(clean()); }); gulp.task('scripts', ['cleanScripts'], function() { return browserify('./client/js/main.js') .bundle() .on('error', function (e) { gutil.log(e); }) .pipe(source('main-' + packageJson.version + '.js')) .pipe(buffer()) .pipe(uglify()) .pipe(gulp.dest('./assets/js')); }); //Watch our changes gulp.task('watch', function () { browserSync.init({ proxy: "localhost:3000" }); gulp.watch(['./client/js/**/*.js', ['scripts']).on('change', browserSync.reload); });

vpoblete · Accepted Answer · 2018-01-23 16:49:54Z

BrowserSync has the option reloadDelay that can be set at gulpfile.js

Time, in milliseconds, to wait before instructing the browser to reload/inject following a file change event

gulp.task('browserSync', function() { browserSync.init({ server: { baseDir: 'app' }, reloadDelay: 100 }); });

Prototype · Accepted Answer · 2016-03-21 18:23:46Z

You can maybe try simple way, otherwise you will need maybe timeout:

gulp.task('watch', function () { watch(['./client/js/**/*.js'], function () { gulp.start('scripts'); }); });

And put browserSync.reload at the end of scripts pipeline:

.pipe(browserSync.reload);

If not working, try timeout and play with times, but this is not a proper solution if you really need fast development and compiling:

gulp.task('watch', function () { watch(['./client/js/**/*.js'], function () { gulp.start('scripts'); setTimeout(function(){ browserSync.reload; }, 1000); //1 second }); });

In this case you don't need reload at the end of scripts pipeline.

Abdeali Chandanwala · Accepted Answer · 2019-10-03 09:34:34Z

I am using Gulp 4

So here's the solution

gulp.task('watch', gulp.series('some-task-name', function () { browserSync.init({ server: { baseDir: config.distFolder + '' } }); var watcher = gulp.watch([ './src/views/*.html', './src/index.html', './src/assets/css/*.css', './src/**/*.js'], gulp.series('some-task-name')); watcher.on('change', async function (path, stats) { console.log('you changed the code'); browserSync.notify("Compiling, please wait!"); browserSync.reload(); }) }));

Now, whenever there is a change in my code, my "some-task-name" gets executed and then the browser page is reloaded. I don't need to delay my browser-sync at all.

this are my dev dependencies in package.json file

"devDependencies": { "browser-sync": "^2.26.7", "connect-modrewrite": "^0.10.2", "del": "^2.2.0", "gulp": "^4.0.2", "gulp-clean-css": "^4.2.0", "gulp-concat": "^2.6.0", "gulp-rev": "^7.0.0", "gulp-rev-replace": "^0.4.4" }

Yanofsky · Accepted Answer · 2021-05-03 23:41:42Z

Here's a straightforward task-based Gulp 4 solution. It turns the reload into a task that completes in series rather than firing it on the change event.

const gulp = require("gulp"); const browserSync = require("browser-sync"); // create a reload task gulp.task("reload", (cb) => { browserSync.reload() cb() }) gulp.task('watch', () => { // when the js changes, process the scripts, then reload gulp.watch('./client/js/**/*.js', gulp.series('scripts', "reload")); }); // run the watch task before setting up browserSync gulp.task("browser-sync", gulp.series("watch", () => browserSync({proxy:"localhost:3000"})));

Collectives™ on Stack Overflow

Browsersync with gulp refreshing before finished

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related