gulp-watch only runs once

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 belowgulp.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.

Under the rules for stackoverflow, my reputation is too low to tell you that Mark's answer worked for me under the comments to his answer, so I'll add it here. We added gulp to the Udemy course I'm taking and this has been a stumbling block for many users on that site.

Someone else will have to mark it as a correct answer. Probably gulp.js should be modified to take this use case into account, but this is my first time using it. Thanks Mark.

Hello everyone i am in the same situation. I am running Wordpress on mamp pro. the answer from mark work for the html change but i stil get stop for Css en JS

If somebody can helping it wil be great tx.

My gulpfiles is:

 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(done) {  browserSync.init({    notify: false,    proxy: settings.urlToPreview,    ghostMode: false  });  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'));});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()}))