Gulp babel completes but code is not updated

Question

As soon as I hit save, gulp babel finishes tasks with message printed in the terminal. But code is not updated in the browser. I have a local Nginx serving my gulped files. I have to reload multiple times to get the updated code.

My gulp file:

gulp.task('js', function () {
    gulp.src([
        'src/app.js',
        'src/app.controller.js',
        'src/**/*.js',
        'libs/*.js'
    ])
        .pipe(sourcemaps.init())
        .pipe(babel())
        .pipe(concat()('app.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'));
});

//other tasks here (css, assets etc)
...

gulp.task('watch', function () {
    gulp.watch('src/**/*.js', ['js']);
    gulp.watch([
        'src/**/*.html',
        'src/images/**/*',
        'src/fonts/**/*',
        'src/**/*.json'], ['assets']);
    gulp.watch('src/**/*.scss', ['sass']);
});
gulp.task('default', ['js', 'sass', 'assets', 'watch']);

Gulp default is what I run.

However, without gulp-babel (for ES5) it works fine. I have to reload only once in the browser to get the updated code. I have tried hard refresh, even enabled the "disable cache while devtools is open" option in Chrome but no luck.

What could be the reason for this?

Answer 1

You need to add return before gulp.src so Gulp can know when the task is completed

gulp.task('js', function () {
    return gulp.src([
        'src/app.js',
        'src/app.controller.js',
        'src/**/*.js',
        'libs/*.js'
    ])
        .pipe(sourcemaps.init())
        .pipe(babel())
        .pipe(concat()('app.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'));
});