Make gulp watch and compile whole directory to es6

Question

Right now I have this code

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

var babelify = require('babelify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');

gulp.task('watch', function() {
  gulp.watch('./scripts/es6/*.es6', ['modules'])
});

gulp.task('modules', function() {
  browserify({
    entries: './scripts/es6/popup.es6',
    debug: true
  })
    .transform(babelify)
    .bundle()
    .pipe(source('popup.js'))
    .pipe(gulp.dest('./scripts'));
});

Right now it is only compiling popup.es6 when it changes, but I want it to compile anything in the ./scripts/es6/ directory. I know it's possible, but how do you do it?

Answer 1

I figured it out. I just removed browserfy and simplified it down to this

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var gutil = require('gulp-util');

var path = require('path');

gulp.task('babel', function() {
  return gulp.src('./scripts/es6/*.es6')
        .pipe(babel())
        .pipe(gulp.dest('./scripts'));
});

gulp.task('watch', function() {
  gulp.watch('./scripts/es6/*.es6', ['babel']);
});

gulp.task('default', ['watch']);