Gulp: Browser reloads before code was syncing

Hi, sometimes i have this issue with BrowserSnc + Gulp: the Browser reloads before the code is synced.

Here my typical gulpfile:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
var dirSync = require('gulp-directory-sync');
var browserSync = require('browser-sync').create();

gulp.task('css', function () {
    var processors = [
        autoprefixer,
        cssnext,
        precss
    ];
    return gulp.src('./src/*.css')
            .pipe(postcss(processors))
            .pipe(gulp.dest('./build'));
});

gulp.task('sync', function () {
    return gulp.src('src')
            .pipe(dirSync('src', 'build', {ignore: ['stuff', 'css']}, 'nodelete'));
});

gulp.task('browserSync', function () {
    browserSync.init({
        proxy: "webwork/clients/wordpress/website"
    });
});

gulp.task('default', ['browserSync'], function () {
    gulp.watch('src/*.css', ['css']).on('change', browserSync.reload);
    gulp.watch('src/**/*.php', ['sync']).on('change', browserSync.reload);
});

After the second change in code, the reload will start before syncing. This makes the changes only visible after the next change/relaod…

Only this workaround works:

gulp.task('browserSync', function () {
    browserSync.init({
        reloadDelay: 1000,
        proxy: "webwork/clients/wordpress/website"
    });
});

If i use the reloadDelay option. Only this will make the Browser reloading after syncing.

[GuyPaddock]

One other thing to look at: make sure all of the tasks that compile code return the task result (promise).

In other words, make sure this:

gulp.task('sass:dev', function () {
  gulp.src([sassSrc])
    .pipe(sourcemaps.init())
    .pipe(sass(sassConfig).on('error', sass.logError))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(sassDest))
    .pipe(browserSync.stream());
});

Becomes:

gulp.task('sass:dev', function () {
  return gulp.src([sassSrc])
    .pipe(sourcemaps.init())
    .pipe(sass(sassConfig).on('error', sass.logError))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(sassDest))
    .pipe(browserSync.stream());
});

This helps ensure that BrowserSync is only invoked when the compilation “promise” is resolved.

[Binaryhat]

Thank you GuyPaddock. return keyword…! that is it…!