CODEWITHSUNDEEP
javascriptgulp
Terminat
Terminat

Reputation: 1237

Gulp 4, Tasks don't execute before calling watch

I am using Gulp 4 to compile my code from TypeScript to JavaScript and to build and serve the app.

I've come across one problem that I cannot solve.

I'd like to run the build, copy-html and copy-css tasks before some file gets changed.

According to Gulp documentation I just need to provide a config object with ignoreInitial set to false, but it doesn't work.

I've tried to call the three tasks before I initialize browserSync but for it also didn't work for me.

gulp.task("serve", function() {
  // TODO Make a build before first serve
  browserSync.init({
    server: {
      baseDir: "./dist/"
    }
  });
  gulp
    .watch(["src/**/*.ts", "src/**/*.html", "src/**/*.css"], {
      ignoreInitial: false
    })
    .on(
      "change",
      gulp.series(
        gulp.parallel("copy-html", "copy-css"),
        build,
        browserSync.reload
      )
    );
});

Upvotes: 1

Views: 44

Answers (1)

Codebling
Codebling

Reputation: 11382

Instead of using calling .on() on the returned chokidar interface, add your tasks to the watch command.

gulp
  .watch(
    ["src/**/*.ts", "src/**/*.html", "src/**/*.css"], 
    { ignoreInitial: false }, 
    gulp.series(
      gulp.parallel("copy-html", "copy-css"),
        build,
        browserSync.reload
      )
    )
  );

Upvotes: 1

Related Questions