Using gulp-watch with babel.js

Question

Below is a Gulp ES6 transpilation task. It works fine, but I'm trying to replace gulp.watch with the gulp-watch plugin so new files will be caught. The problem is that gulp-watch isn't giving me what gulp.watch does in the callback, and I'm not sure what to do about it.

Here's my original working task:

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    gprint = require('gulp-print'),
    notify = require('gulp-notify'),
    babel = require('gulp-babel');

gulp.task('default', function() {
    return gulp.watch('../**/**-es6.js', function(obj){
        if (obj.type === 'changed') {
            gulp.src(obj.path, { base: './' })
                .pipe(plumber({
                    errorHandler: function (error) { /* elided */ }
                }))
                .pipe(babel())
                .pipe(rename(function (path) {
                    path.basename = path.basename.replace(/-es6$/, '');
                }))
                .pipe(gulp.dest(''))
                .pipe(gprint(function(filePath){ return "File processed: " + filePath; }));
        }
    });
});

And here's all that I have so far with gulp-watch:

var gulp = require('gulp'),
    rename = require('gulp-rename'),
    plumber = require('gulp-plumber'),
    gprint = require('gulp-print'),
    notify = require('gulp-notify'),
    babel = require('gulp-babel'),
    gWatch = require('gulp-watch');

gulp.task('default', function() {
    return gWatch('../**/**-es6.js', function(obj){
        console.log('watch event - ', Object.keys(obj).join(','));
        console.log('watch event - ', obj.event);
        console.log('watch event - ', obj.base);

        return;
        if (obj.type === 'changed') {
            gulp.src(obj.path, { base: './' })
                .pipe(plumber({
                    errorHandler: function (error) { /* elided */ }
                }))
                .pipe(babel())
                .pipe(rename(function (path) {
                    path.basename = path.basename.replace(/-es6$/, '');
                }))
                .pipe(gulp.dest(''))
                .pipe(gprint(function(filePath){ return "File processed: " + filePath; }));
        }
    });
});

The output of the logging is this:

watch event - history,cwd,base,stat,_contents,event

watch event - change

watch event - ..

How do I get gulp-watch to give me the info I had before, or, how can I change my task's code to get this working again with gulp-watch?

Answer 1

According to the tests, obj.relative should contain the relative filename, and obj.path will still hold the absolute file path, just as it did in your original code. Also, the callback accepts a Vinyl object, which is documented here: https://github.com/wearefractal/vinyl

You probably can't see them in your logs since Object.keys doesn't enumerate properties in the prototype chain.

Using a for..in loop, you should be able to see all the properties.