Is there a way I can see which files are processed by a gulp watch?

Question

I have this gulp task:

var abc = {
    src: [
      'app/**/abc.html',
      'app/**/def.html'
    ],
};
gulp.task('watchHTMLs', function () {
    gulp.watch(abc.src, function (file) {
        return gulp.src(file.path, { base: process.cwd() })
          .pipe(rename({ basename: 'base' }))
          .pipe(gulp.dest('./'));
    });
});

Is there some way that I can see an output from where I run the gulp script that would show which file is changed?

Something like this:

> cmd.exe /c gulp -b "C:\H\user\user" --color --gulpfile "C:\H\user\user\Gulpfile.js" watchHTMLs
[11:37:29] Using gulpfile C:\H\user\user\Gulpfile.js
[11:37:29] Starting 'watchHTMLs'...
[11:37:29] Finished 'watchHTMLs' after 60 ms

Found file /app/xxx/abc.html Found file /app/yyy/abc.html Found file /app/xxx/def.html

Answer 1

Take a look at gulp-print :

gulp.watch(abc.src, function (file) {
    return gulp.src(file.path, { base: process.cwd() })
      
      .pipe(rename({ basename: 'base' }))
      .pipe(gulp.dest('./'));
    });

Answer 2

gulp.watch returns an EventEmitter so you can simply listen to changes:

var watcher = gulp.watch(abc.src, 'task');
watcher.on('change', event => {
    console.log(event.path);
});

Alternatively, if you want to follow your approach I recommend using gulp-debug :

var debug = require('gulp-debug');

...

gulp.watch(abc.src, function (file) {
    return gulp.src(file.path, { base: process.cwd() })
      .pipe(debug())
      .pipe(rename({ basename: 'base' }))
      .pipe(gulp.dest('./'));
});