javascript - gulp.watch going into endless loop - Stack Overflow

admin管理员组

文章数量:1291050

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

When I run "gulp development", it goes into an infinite loop like this.

I am sure there is an issue with the way I am trying to watch stuff. Can someone help me out with this?

Thanks!

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

When I run "gulp development", it goes into an infinite loop like this.

I am sure there is an issue with the way I am trying to watch stuff. Can someone help me out with this?

Thanks!

• javascript
• node.js
• gulp
• gulp-watch

Share Improve this question Follow edited Dec 15, 2014 at 10:32 Preview 35.8k1010 gold badges9595 silver badges113113 bronze badges asked Dec 13, 2014 at 18:49 stripathistripathi 7861111 silver badges2323 bronze badges 1

• Your screen doesn't show any loop – Preview Commented Dec 13, 2014 at 21:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

I think your problem es from your html watcher.

The fact you're watching for changes on all your .html files to launch the html task, that is injecting references to your scripts and your styles files into the index.html will cause this infinite loop.

Just when the files are finished to be injected and written to the disk, the final dest of your html task, this trigger your watcher that restart everything again and again.

So remove the watcher or exclude the index.html from the watcher to prevent the restarts

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

本文标签： javascriptgulpwatch going into endless loopStack Overflow