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”启动后发生一次。

- Clive Corner

---

尝试在您的“watch”任务中添加一个“回调”函数，就像您在“scripts”任务中所做的那样，看看是否有帮助。 - Mark

嗨，马克，谢谢你的回复，看起来能够完成工作：-） - Clive Corner

我想我会把它添加为一个答案 -- 任务只运行一次通常是因为gulp不知道它第一次已经完成了。 - Mark

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

我也曾看到有人建议使用这种形式的watch语句：

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

不是通常使用的：

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

所以如果回调函数解决方案没有起作用，请尝试使用建议的watch形式。

- Mark

---

有关此事有任何更新吗？如果答案有效，请接受它，以便其他人在这里也知道。谢谢。 - Mark

Answer 2

根据stackoverflow的规定，我的声望太低了，无法在评论中告诉您Mark的答案对我有用，所以我会在这里添加它。我们将gulp添加到我正在学习的Udemy课程中，这对该网站上的许多用户来说是一个绊脚石。

其他人将不得不将其标记为正确答案。可能应该修改gulp.js以考虑这种用例，但这是我第一次使用它。谢谢Mark。

- esizert

Answer 3

大家好，我也遇到了相同的问题。我正在mamp pro上运行WordPress。Mark的解答对于HTML的修改有用，但我仍然在CSS和JS方面遇到了阻碍。

如果有人能提供帮助，那就太好了。我的gulp文件如下：

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

- user2886617