gulp-watch solo se ejecuta una vez

Trago watch se ejecuta una sola vez en el primer cambio. Estoy ejecutando WordPress en apache2 en ubuntu 14 y estoy usando un tutorial. Ilustra cómo usar gulp para observar cambios. Funciona bien para el primer cambio: actualiza el navegador que es http://localhost:3000. Soy bastante nuevo en la configuración de gulp watch, por lo que no sé por qué solo se ejecuta una vez. El gulpfile.js es el siguiente. Si alguien necesita algo más para aclarar, por favor vuelva. Gracias

He hecho la versión de codificación de apagarlo y volverlo a encender. He revisado varias respuestas para este tipo de problema en stackoverflow y otros lugares.

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()
}))

Espero que la vista y la funcionalidad del navegador se actualicen con cada cambio de código. Esto solo sucede una vez después de comenzar a tragar con ‘gulp watch‘.

Una tarea de gulp que solo se ejecutará una vez generalmente indica que gulp no puede determinar que ha terminado la primera vez y, por lo tanto, gulp no la ejecutará nuevamente.

Cambiar a este código:

// 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();
});

yo tambien lo he visto sugirió usar este formulario de declaración de reloj:

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

en vez de el comúnmente utilizado:

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

Entonces, si la solución de devolución de llamada no funcionó, intente usar la forma sugerida de watch.

De acuerdo con las reglas de stackoverflow, mi reputación es demasiado baja para decirles que la respuesta de Mark funcionó para mí en los comentarios de su respuesta, así que la agregaré aquí. Agregamos trago al curso de Udemy que estoy tomando y esto ha sido un obstáculo para muchos usuarios en ese sitio.

Alguien más tendrá que marcarla como respuesta correcta. Probablemente, gulp.js debería modificarse para tener en cuenta este caso de uso, pero esta es la primera vez que lo uso. gracias marca

Hola a todos yo estoy en la misma situacion. Estoy ejecutando WordPress en mamp pro. la respuesta de Mark funciona para el cambio de html, pero todavía me detengo para Css en JS

Si alguien puede ayudar, será un gran tx.

Mi gulpfiles es:

 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()
}))