Gulp watch 升级到gulp 4后，gulp watch将导致无休止的循环

我已将我的gulpfile.js升级到gulp 4<代码>一口气开发工作正常。但是每当我编辑任何文件时，

reload

和

inject

任务都会进入一个无休止的循环

My gulpfile.js：

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  symlink = require('gulp-symlink'),
  jshint = require('gulp-jshint'),
  browserSync = require('browser-sync').create(),
  concat = require('gulp-concat'),
  useref = require('gulp-useref'),
  replace = require('gulp-replace'),
  templateCache = require('gulp-angular-templatecache'),
  gulpif = require('gulp-if'),
  gulpUtil = require('gulp-util'),
  uglify = require('gulp-uglify'),
  minifyCss = require('gulp-clean-css'),
  merge = require('merge-stream'),
  clean = require('gulp-clean'),
  inject = require('gulp-inject'),
  svgSprite = require('gulp-svg-sprite'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer');
  webfonts = require('gulp-font');

/* DEV */
gulp.task('dev-serve', function () {
  browserSync.init({
    server: './'
  });

  gulp.watch('app/**/*.scss', gulp.parallel('sass'));
  gulp.watch('app/**/*.html', gulp.series('inject', 'reload'));
  gulp.watch('app/**/*.js', gulp.parallel('inject', 'reload'));
  gulp.watch('app/images/svg-sprite/*', gulp.parallel('svg-sprite', 'reload'));
  gulp.watch('app/images/**/*', gulp.parallel('reload'));
  gulp.watch('app/fonts/*', gulp.parallel('reload'));
});

/* PROD */
gulp.task('prod-serve', function () {
  browserSync.init({
    server: './www'
  });

  gulp.watch('app/**/*.scss', gulp.parallel('sass', 'build-html'));
  gulp.watch('app/**/*.html', gulp.parallel('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/**/*.js', gulp.parallel('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/images/**/*', gulp.parallel('copy-images', 'reload'));
  gulp.watch('app/fonts/*', gulp.parallel('copy-fonts', 'reload'));
});

// SVG SPRITE
gulp.task('svg-sprite', function () {
  var svgPath = 'app/images/svg-sprite/*.svg';

  return gulp.src(svgPath)
    .pipe(svgSprite({
      shape: {
        spacing: {
          padding: 0
        }
      },
      mode: {
        css: {
          dest: './',
          layout: 'diagonal',
          sprite: 'app/images/sprite.svg',
          bust: false,
          render: {
            scss: {
              dest: 'app/styles/tools/_sprite.scss',
              template: 'app/styles/tools/_sprite-template.tpl'
            }
          }
        }
      },
      variables: {
        mapname: 'icons'
      }
    }))
    .pipe(gulp.dest('./'));
});

// SCSS
gulp.task('sass', function (done) {
  gulp.task('sass', function () {
    return gulp.src('app/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(postcss([autoprefixer()]))
      .pipe(gulp.dest('app'))
      .pipe(browserSync.stream());
  });
  done();
});


// INJECT
gulp.task('inject', function () {
  return gulp.src('app/index.html')
    .pipe(inject(gulp.src(['app/**/*.module.js', 'app/**/*.js', '!app/vendor/**/*.js'], {read: false}), {relative: true}))
    .pipe(gulp.dest('./app'));
});


// HTML
gulp.task('build-html', function () {
  return gulp.src('app/index.html')
    .pipe(replace('href="/app/"', 'href="/"')) // replace base href
    .pipe(useref())
    .pipe(gulpif('*.js', uglify().on('error', gulpUtil.log)))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(gulp.dest('www'));
});


// IMAGES
gulp.task('copy-images', function () {
  return gulp.src(['app/images/*'])
    .pipe(gulp.dest('www/images'));
});

// FONTS
gulp.task('copy-fonts', function () {
  return gulp.src(['app/fonts/*'])
    .pipe(gulp.dest('www/fonts'));
});

// TEMPLATES
gulp.task('bundle-templates', function () {
  return gulp.src(['app/**/*.html', '!app/index.html'])
    .pipe(gulpif('*.html', templateCache({module: 'jibbar'})))
    .pipe(concat('templates.min.js'))
    .pipe(gulp.dest('www/tmp'));
});


// COMPONENTS
gulp.task('bundle-components', function () {
  return gulp.src(['app/**/*.module.js', 'app/**/*.js', '!app/vendor/**/*.js'])
    .pipe(concat('script.min.js'))
    .pipe(gulp.dest('www'));
});


// MERGE TEMPLATES AND COMPONENTS
gulp.task('merge-templates-and-components', gulp.parallel('bundle-templates', 'bundle-components'), function () {
  return gulp.src(['www/script.min.js', 'www/tmp/templates.min.js'])
    .pipe(concat('script.min.js'))
    .pipe(gulp.dest('www'))
});


// MINIFY SCRIPTS
gulp.task('minify-scripts', gulp.parallel('merge-templates-and-components', 'bundle-templates', 'bundle-components'), function () {
  return gulp.src('www/script.min.js')
    .pipe(uglify().on('error', gulpUtil.log))
    .pipe(gulp.dest('www'))
});


// CLEAN TEMP
gulp.task('clean', gulp.parallel('bundle-templates', 'bundle-components', 'merge-templates-and-components'), function () {
  return gulp.src('www/tmp', {read: false})
    .pipe(clean());
});


// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function () {
  browserSync.reload();
});

//COPY IFRAME
gulp.task('copy-iframe', function () {
  return gulp.src('app/components/builder/iframe/*')
    .pipe(gulp.dest('www/app/components/builder/iframe'));
});

//COPY TINYMCE
gulp.task('copy-tinymce', function () {
  return gulp.src('app/vendor/tinymce/**/*')
    .pipe(gulp.dest('www/app/vendor/tinymce'));
});

//COPY VENDOR FILES
gulp.task('copy-vendor-files', function () {
  return gulp.src(['app/vendor/angular.js','app/vendor/bootstrap.css','app/vendor/tooltip.css','app/vendor/jquery.js'])
    .pipe(gulp.dest('www/app/vendor'));
});

//COPY APP IMAGES
gulp.task('copy-app-images', function () {
  return gulp.src(['app/images/builder-image.svg','app/images/builder-dimensions.svg','app/images/info_icon.svg'])
    .pipe(gulp.dest('www/app/images'));
});

gulp.task('dev', gulp.series(
  'inject',
  'svg-sprite',
  'sass',
  'dev-serve'
));

gulp.task('prod', gulp.series(
  'inject',
  'sass',
  'copy-iframe',
  'copy-tinymce',
  'copy-vendor-files',
  'copy-app-images',
  'build-html',
  'copy-images',
  'copy-fonts',
  'minify-scripts',
  'clean',
  'prod-serve'
));

下图显示了无限循环

谁能帮我找出我做错了什么

---

提前感谢。

除了我上面的评论之外，这可能是一个问题：

// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function () {
  browserSync.reload();
});

在watch语句中，您调用inject和reload，然后在reload任务中，您首先调用inject更新您的html文件（如果没有其他内容，则调用timestamp），因此html watch被重新触发，再次调用inject和reload，等等

只需使用：

// RELOAD BROWSER
gulp.task('reload',  function () {
  browserSync.reload();
});

把你所有的手表都换成gulp系列。由于上次调用了reload，因此无需在reload任务中再次调用inject

/* PROD */
gulp.task('prod-serve', function () {
  browserSync.init({
    server: './www'
  });

  gulp.watch('app/**/*.scss', gulp.series('sass', 'build-html'));
  gulp.watch('app/**/*.html', gulp.series('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/**/*.js', gulp.series('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/images/**/*', gulp.series('copy-images', 'reload'));
  gulp.watch('app/fonts/*', gulp.series('copy-fonts', 'reload'));
});

并对“开发服务”任务执行相同的操作

[编辑修复将只运行一次] 改为：

// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function (done) {
  browserSync.reload();
  done();
});

此外，我非常确定您需要使用以下表格：

// RELOAD BROWSER
//--------------------------------------|
gulp.task('reload', gulp.series('inject', function (done) {
  browserSync.reload();
  done();
}));
// another ) at the end above too.

---

查看最后一个匿名函数如何包含在

gulp.series

调用中。你需要在很多任务中做出改变

@Mark任务在我已经共享的gulpfile.js中。在您的“dev-serve”和“prod-serve”任务中，我将更改为所有gulp.series而不是任何gulp.parallel。谢谢@Mark的帮助。在做出建议的改变后，它不会进入无休止的循环。但现在手表只走了一次。这意味着，如果我第一次更改和.js文件，它将重新加载浏览器，但从第二次更改开始，它将不再重新加载。你能帮我找出什么问题吗？提前谢谢。请看上面我的零钱。通常，一个任务只运行一次的问题是，以前的任务从未发出完成的信号，因此gulp不会启动新任务。在您的情况下，至少需要重新加载任务来表示完成。我添加了done语句。这能解决问题吗？您还需要对一些其他任务执行相同的操作，如“dev-serve”、“prod-serve”和“svg-sprite”。此外，还需要对上面的另一个编辑来正确使用gulp.series（）。