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?

I've added my sources to an array, e.g: `gulp.watch([paths.polymerScss, paths.polymerTemplates, paths.polymerScripts], ['polymer']);`. Would that help for `copySources` rather than having a separate watch() for each of them? — Samuli Hakoniemi, Nov 07 '14 at 21:50

score 0 · Accepted Answer · answered Nov 08 '14 at 21:25

0

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.

answered Nov 08 '14 at 21:25

Justin Howard

5,504
1
21
48

dman · Answer 2 · 2016-05-27T19:39:39.073

May I also suggest gulp-newy in which you can manipulate the path and filename in your own function. Then, just use the function as the callback to the newy(). This gives you complete control of the files you would like to compare.

newy(function(projectDir, srcFile, absSrcFile) {
  // do whatever you want to here. 
  // construct your absolute path, change filename suffix, etc. 
  // then return /foo/bar/filename.suffix as the file to compare against
}

Gulp watch is triggered for every file separately

2 Answers2