gulp.watch进入无尽循环

Question

这是我的大文件。

var gulp = require('gulp'); 
var less = require('gulp-less'); 
var clean = require('gulp-clean'); 
var mincss = require('gulp-minify-css'); 
var gulpif = require('gulp-if'); 
var uglify = require('gulp-uglify'); 
var concat = require('gulp-concat'); 
var inject = require('gulp-inject'); 
var templateCache = require('gulp-angular-templatecache'); 
var angularFilesort = require('gulp-angular-filesort'); 

var env = 'development'; 

gulp.task('default', ['clean'], function() { 
    gulp.start('static', 'html'); 
}); 

gulp.task('production', ['set-production', 'default']); 

gulp.task('development', ['default'], function() { 
    gulp.watch('./src/less/**/*.less', ['styles']); 
    gulp.watch('./src/js/**/*.js', ['scripts']); 
    gulp.watch('./*.html', ['html']); 
}); 

gulp.task('static', function() { 
    return gulp.src(['./src/static/*.*']) 
     .pipe(gulp.dest('./dist/static')); 
}); 

gulp.task('clean', function() { 
    return gulp.src('./dist', { 
     read: false 
     }) 
     .pipe(clean()); 
}); 

gulp.task('html', ['styles', 'vendor-js', 'templateCache', 'scripts'], function() { 
    return gulp.src('./*.html') 
     .pipe(inject(gulp.src(['./dist/js/**/*.js']) 
      .pipe(angularFilesort()), { 
       'ignorePath': 'dist/js', 
       'addRootSlash': false, 
       'addPrefix': 'scripts' 
      })) 
     .pipe(inject(gulp.src(['./dist/vendors/**/*.js', '!./dist/vendors/less/less.js'], { 
      read: false 
     }), { 
      'name': 'vendors', 
      'ignorePath': 'dist/vendors', 
      'addRootSlash': false, 
      'addPrefix': 'vendors' 
     })) 
     .pipe(inject(gulp.src(['./dist/css/*.css'], { 
      read: false 
     }), { 
      'ignorePath': 'dist/css', 
      'addRootSlash': false, 
      'addPrefix': 'styles' 
     })) 
     .pipe(gulp.dest('dist')); 
}); 

gulp.task('styles', function() { 
    return gulp.src('./src/less/*.less') 
     .pipe(less()) 
     .pipe(gulpif(env === 'production', mincss())) 
     .pipe(gulpif(env === 'production', concat('styles.css'))) 
     .pipe(gulp.dest('dist/css')); 
}); 

gulp.task('scripts', function() { 
    return gulp.src('./src/js/**/*.js') 
     .pipe(gulpif(env === 'production', uglify())) 
     .pipe(gulpif(env === 'production', concat('scripts.js'))) 
     .pipe(gulp.dest('dist/js')); 
}); 

gulp.task('vendor-js', function() { 
    return gulp.src(['./vendors/jQuery/jquery-1.11.1.js', 'vendors/angular/angular.js']) 
     .pipe(concat('vendors.js')) 
     .pipe(gulp.dest('dist/vendors')); 
}); 

gulp.task('templateCache', function() { 
    return gulp.src('./src/js/**/*.tpl.html') 
     .pipe(templateCache('templatesCache.js', { 
      module: 'templatesCache', 
      standalone: true, 
      root: './templates/' 
     })) 
     .pipe(gulp.dest('./dist/js')); 
}); 

gulp.task('set-production', function() { 
    env = 'production'; 
}); 

当我运行“gulp开发”时，它会像这样进入一个无限循环。

我肯定是我想要看东西的方式的问题。 有人可以帮我解决这个问题吗？

谢谢！

Answer 1

我认为你的问题来自你的html观察者。

您正在监视所有.html文件的变化以启动html任务，即将参考脚本和样式文件注入index.html将导致此无限循环。

当文件完成注入并写入磁盘时，html任务的最终dest会触发观察程序，它会一次又一次地重启所有内容。

所以删除观察者或观察者排除index.html防止重启

gulp.watch(['./*.html', '!index.html'], ['html']);