Gulp watch is triggered for every file separately

Question

I think I need general improvement of my gulp file. But what is currently bothering me the most, is the behavior of gulp watch. I use gulp-watch to reload gulp-connect to update chrome. The problem is, it is triggered for every file separately.

Here is an extract of my the gulp file:

gulp.task('copySources', function() {
    gulp.src('src/*.html')
        .pipe(gulp.dest('dist'));
    gulp.src('src/css/*css')
        .pipe(gulp.dest('dist/css'));
    gulp.src('src/images/**')
        .pipe(gulp.dest('dist/images'));
    gulp.src('src/api/**')
        .pipe(gulp.dest('dist/api'));
});

gulp.task('webserver', function() {
    connect.server({
        livereload: true,
        root: ['dist']
    });
});

gulp.task('livereload', function() {
    gulp.src('dist/**')
        .pipe(connect.reload());
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['lint', 'scripts']);
    gulp.watch('src/*.html', ['copySources']);
    gulp.watch('src/css/*.css', ['copySources']);
    gulp.watch('src/images/**', ['copySources']);
    gulp.watch('src/api/**', ['copySources']);
    gulp.watch('dist/**', {verbose: true}, function(files) {
        console.log(files);
    });
    gulp.watch('libs/**', ['copyLibs']);
});

I changed the last watch from ['livereload'] to the function which prints the file path for debugging purposes. (the verbose setting seems not to have any effect.) Output of running gulp looks like this:

{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\index.html' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\css\\bootstrap.min.css' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\css\\style.css' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\api\\recipe.json' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Chocolate_Cake.png' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Mint_Tea.png' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\all.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Penne_Pasta.jpg' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\cc_logo.svg' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\all.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.min.js.map' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.min.js.map' }

The problem is, that the watch is triggered for every file separately. This is annoying since the lint warnings may scroll out of view, depending on the hight of the window. How do I resolve this issue?

Answer 1

The problem is that you're copying every source file to the dist directory whenever a single file changes. If you use gulp-changed or gulp-newer, only the changed/newer files will be copied and trigger the watch.