Gulp: G4 - Watch only running once

[joe-watkins]

Gulp 4 newbie here. I'm having trouble firing off a series of tasks using watch in Gulp 4. Anyone see an issue with this?

gulp.watch(['scripts/**/*.js','!scripts/main.min.js'], gulp.series(buildScripts,reload));

The darn thing only runs once.

[TrySound]

@joe-watkins dup of https://github.com/gulpjs/gulp/issues/1624

[phated]

More specifically, an exact duplicate of https://github.com/gulpjs/gulp/issues/1623 - please see my response at https://github.com/gulpjs/gulp/issues/1623#issuecomment-215847959

Your reload function is most likely a method pulled directly from BrowserSync but it isn't an async function. The reason this was working at all (though incorrectly) was due to inconsistencies in our API.

[phated]

Docs for gulp.watch in the 4.0 branch have been updated for more clarity.

[joe-watkins]

@phated @TrySound Thanks very much for the help! ;)

Here is what I ended up doing to solve the issue w/Browsersync and Gulp 4.

Removed the reload from the watch:

gulp.watch(['scripts/**/*.js','!scripts/main.min.js'], buildScripts);

Added .pipe(browserSync.stream()) to my task:

function buildScripts(){
      return gulp.src(appDefaults.mainJsFiles)
        .pipe(concat(appDefaults.jsMin))
        .pipe(uglify())
        .pipe(gulp.dest(appDefaults.jsDir))
        .pipe(browserSync.stream()) // <!-- this is the line added
        .pipe(notify({message: 'JS Compiled'}));
    }

[haluvibe]

Wrap the browserSync.reload() in a function with a done callback :

function reload(done) {
  browserSync.reload();
  done();
}

gulp.watch(['scripts/**/*.js','!scripts/main.min.js'], gulp.series(buildScripts, reload));