Gulp watch multiple folders

Question

In a project, during development, I want to

• Watch and recompile server side code with Babel (since I want to use "ES6" on Parse)
• Watch and recompile client side code with Browserify/Watchify

How can I do this? I could write 2 watch tasks, but I will have to open 2 terminal windows just to watch both these directories. Isit possible to do it in 1 gulp task? Like do 2 tasks?

Answer 1

Yes, you can do what you want.

gulp.task('watch', function() {
    gulp.watch(['directoryA/**/*.js', 'directoryB/js/**/*.js'], ['task']);
});

You can also add a more to the array if you want to watch other file types. IE: 'directoryA/**/*.html'

If you want them to run two different tasks as you mention, change it to:

gulp.task('watch', function() {
    gulp.watch(['directoryA/**/*.js'], ['taskA']);
    gulp.watch(['directoryB/**/*.js'], ['taskB']);
});

An example gulp task I have using Browerify and Babelify.

gulp.task('taskA', function() {
    return browserify('path/to/file.js')
    .transform('babelify')
    .bundle()
    .pipe(source('file.js')) // this is the output file name
    .pipe(gulp.dest('destination/directory/')); // and this is where it ends up
});

EDIT

I just realized I didn't address whether you need one or two tasks. You can technically do either, but the best way would be to have two separate tasks.