Gulp 4 - watch not watching changes

Question

Today I migrated to Gulp 4, but I'm not able to get my watch function to work.

// Watch
gulp.task('watch', gulp.series('typescript', 'sass', 'browserSync', function(){
  gulp.watch('./app/styles/**/*.scss', gulp.series('sass'));
  gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
  gulp.watch('./app/*.html', browserSync.reload);
}));

typescript, sass, browserSync will run but watch does not react to file changes.

Helped me: [API - Watching Files](https://gulpjs.com/docs/en/getting-started/watching-files) — vsync, Dec 17 '18 at 14:06
@vsync That seems to be the key to my issue right now, but how do I implement it? What is the `cb` in the API example `function css(cb) { // body omitted cb();`? } — YCode, Feb 13 '19 at 16:04
[This article](https://css-tricks.com/gulp-for-wordpress-initial-setup/) explains `cb` and other related issues. — YCode, Feb 13 '19 at 19:46

score 4 · Answer 1 · edited Apr 03 '19 at 09:59

I just had the same problem. You don't actually have a reference to the initialized browserSync inside your watch gulp task. Instead of having your browserSync.init function in a separate browserSync gulp task, move it to inside your watch task, and it should work. Hope this helps!

Example:

gulp.task('watch', gulp.series(function (){
  browserSync.init({
    proxy:"http://localhost:8888",
    injectChanges: true,
    plugins: ["bs-html-injector?files[]=*.html"]
  });
  var html = gulp.watch('development/index.html');
  html.on('change', function(path, stats) {
    console.log('you changed the html');
    browserSync.notify("Compiling, please wait!");
    browserSync.reload("index.html");
  })
  var js = gulp.watch('development/**/*.js');
  js.on('change', function(path, stats) {
    console.log('you changed the js');
    browserSync.notify("Compiling, please wait!");
    browserSync.reload();
  })
  var css = gulp.watch('development/**/*.css');
  css.on('change', function(path, stats) {
    console.log('you changed the css');
    browserSync.notify("Injecting CSS!");
    browserSync.reload("*.css");
  })
}));

This could benefit from putting the actual compiling task calls in here for clarity/completion, in other words your example watches but does nothing :) — Bung, May 26 '19 at 23:14
@neilVanLandigham your answer save my day.but I have update it for gulp-sass — Owaiz Yusufi, Nov 27 '19 at 06:25

Remario · Answer 2 · 2018-01-07T16:52:31.547

1

Change gulp.watch('app/scripts/**/*.ts', gulp.series('typescript')); to a absolute gulp.watch('./app/scripts/**/*.ts', gulp.series('typescript'));

Also i normally stick this syntax, per task.

var watcher = gulp.watch('js/**/*.js', gulp.parallel('concat', 'uglify'));
watcher.on('change', function(path, stats) {
  console.log('File ' + path + ' was changed');
});

edited Jan 07 '18 at 16:52

answered Jan 07 '18 at 16:49

Remario

3,813
2
18
25

That one is missing because I was looking for problem in paths. Does not help. – Martin Hetfield Mali Jan 07 '18 at 16:51
Its more explicit always work for me, the parallel is not neccessary change to series in your case – Remario Jan 07 '18 at 16:52

score 0 · Answer 3 · answered Feb 13 '19 at 17:25

I had some issues too, and i found this tutorial of gulp 4, this is my gulpfile to compile scss and watch the Scss files, concat and compile to a main.min.css with autoprefix.

var gulp = require('gulp'),
    concat  = require('gulp-concat'),
    autoprefixer    = require('gulp-autoprefixer'),
    sass = require('gulp-sass');

//task para o sass

var paths = {
  styles: {
    src: 'scss/**/*.scss',
    dest: 'css'
  }
};

function styles() {
  return gulp
    .src(paths.styles.src, {
      sourcemaps: true
    })
  .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
  .pipe(concat('main.min.css'))
  .pipe(autoprefixer({
    browser: ['last 2 version', '> 5%'],
    cascade: false
  }))
  .pipe(gulp.dest(paths.styles.dest));
}

function watch() {
  gulp.watch(paths.styles.src, styles);
}

var build = gulp.parallel(styles, watch);
gulp.task(build);
gulp.task('default', build);

I think that on the gulp v4 you need to use the gulp.parallel. I'm digging to learn more about the new version.

Gulp 4 - watch not watching changes

3 Answers3