gulp.watch进入无限循环

Question

这是我的gulpfile。

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

当我运行＆＃34; gulp development＆＃34;时，它会像这样进入无限循环。

我确信我尝试观看内容的方式存在问题。 有人可以帮我解决这个问题吗？

谢谢！

Answer 1

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

您正在关注所有.html文件的更改，以启动html任务，即将脚本和样式文件的引用注入index.html会导致这种无限循环。

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

因此请删除观察程序或从观察程序中排除index.html以防止重新启动

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