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

當我運行“gulp development”時，它會像這樣進入無限循環。

我確信我試圖觀察的方式存在問題。 有人可以幫我解決這個問題嗎？

謝謝！

Answer 1

我認為你的問題來自你的html觀察者。

您正在觀察所有.html文件的更改以啟動html任務的事實，即將腳本和樣式文件的引用注入index.html將導致此無限循環。

就在文件完成注入並寫入磁盤時， html任務的最終dest ，這會觸發你的觀察者一次又一次地重啟所有內容。

因此，請從觀察程序中刪除觀察程序或排除index.html以防止重新啟動

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