gulp-watch 只运行一次

Question

Gulp watch 在第一次更改时只运行一次。我在 ubuntu 14 上的 apache2 上运行 Wordpress，并且正在使用教程。它说明了如何使用 gulp 来监视更改。第一次更改可以正常工作 - 刷新浏览器 http://localhost:3000。我对设置 gulp watch 非常陌生，所以我不知道为什么它只运行一次。 gulpfile.js 如下。如果有人需要任何其他澄清，请回来。谢谢

我已经完成了将其关闭再打开的编码版本。我已经在 stackoverflow 和其他地方查看了针对此类问题的各种回复。

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

我希望浏览器视图和功能随着代码的每次更改而更新。这只会在使用 'gulp watch' 启动 gulp 后发生一次。

Answer 1

只运行一次的 gulp 任务通常表明 gulp 无法确定它是否已完成第一次，因此 gulp 不会再次运行它。

改成这段代码：

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

我也看到了建议使用这种形式的观察声明：

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

代替常用的：

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

因此，如果回调解决方案不起作用，请尝试使用建议的watch 形式。

Answer 2

根据 stackoverflow 的规则，我的声誉太低，无法告诉您 Mark 的答案在 cmets 对他的答案下对我有用，所以我将在此处添加。我们在我正在学习的 Udemy 课程中添加了 gulp，这对于该站点上的许多用户来说一直是一个绊脚石。

其他人必须将其标记为正确答案。可能应该修改 gulp.js 以考虑到这个用例，但这是我第一次使用它。谢谢马克。

Answer 3

大家好，我也有同样的情况。我在 mamp pro 上运行 Wordpress。来自标记的答案适用于 html 更改，但我仍然停止使用 Css en JS

如果有人可以帮助它，那就太好了。

我的 gulpfile 是：

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