gulp-watch only runs once

Question

Gulp watch runs only once on the first change. I am running Wordpress on apache2 on ubuntu 14 and am using a tutorial. It illustrates how to use gulp to watch for changes. It works okay for the first change - refreshes the browser which is http://localhost:3000. I'm pretty much new to setting up gulp watch so I am at a loss as to why it only runs once. The gulpfile.js is as follows. If anyone needs anything else to clarify please get back. Thanks

I have done the coding version of turning it off and on again. I have looked through various responses for this type of issue on stackoverflow and other places.

var gulp = require('gulp'),
   settings = require('./settings'),
   webpack = require('webpack'),
   browserSync = require('browser-sync').create(),
   postcss = require('gulp-postcss'),
   rgba = require('postcss-hexrgba'),
   autoprefixer = require('autoprefixer'),
   cssvars = require('postcss-simple-vars'),
   nested = require('postcss-nested'),
   cssImport = require('postcss-import'),
   mixins = require('postcss-mixins'),
   colorFunctions = require('postcss-color-function');

gulp.task('styles', function() {
  return gulp.src(settings.themeLocation + 'css/style.css')
    .pipe(postcss([cssImport, mixins, cssvars, nested, rgba, colorFunctions, autoprefixer]))
    .on('error', (error) => console.log(error.toString()))
    .pipe(gulp.dest(settings.themeLocation));
});

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

gulp.task('watch', function() {
 browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
    ghostMode: false
  });

  gulp.watch('./**/*.php', function() {
    browserSync.reload();
  });

  gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));

  gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], 
       gulp.parallel('waitForScripts'));
});

gulp.task('waitForStyles', gulp.series('styles', function() {
  return gulp.src(settings.themeLocation + 'style.css')
    .pipe(browserSync.stream());
}))

gulp.task('waitForScripts', gulp.series('scripts', function(cb) {
  browserSync.reload();
  cb()
}))

I expect the browser view and functionality to be updated with every change of code. This only happens once after starting gulp with 'gulp watch'.

Answer 1

A gulp task that will only run once usually indicates that gulp is unable to determine that it has finished the first time and so gulp will not run it again.

Change to this code:

// notice the "done" added below
gulp.task('watch', function(done) {
 browserSync.init({
    notify: false,
    proxy: settings.urlToPreview,
    ghostMode: false
  });

  //  I also added a callback function below, just within this one gulp.watch
  gulp.watch('./**/*.php', function(done) {
    browserSync.reload();
    done();
  });

  gulp.watch(settings.themeLocation + 'css/**/*.css', gulp.parallel('waitForStyles'));
  gulp.watch([settings.themeLocation + 'js/modules/*.js', settings.themeLocation + 'js/scripts.js'], 
             gulp.parallel('waitForScripts'));
  done();
});

I have also seen it suggested to use this form of watch statement:

gulp.watch('src/pages/**/*.html').on('change',gulp.series(pages, browser.reload));

instead of the commonly used:

gulp.watch('src/pages/**/*.html', gulp.series(pages, browserSync.reload));

So if the callback solution didn't work, try using the suggested form of watch.