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?

Solution

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.

Comments

[Jiew Meng]

I'd prefer 1 task so that during development I can just do gulp watch to watch all folders I need

[Jacques ジャック]

To clarify, I'm talking about the number of tasks your watch task will call. If you look at my second example, it's one gulp task that will watch two directories and fire off a different task for each.

[Jiew Meng]

I think I need something like your 2nd example, except 1 will be a gulp.watch one should be a call to start the watchify task. How might I do the later?

[Jacques ジャック]

@JiewMeng That pastebin will only work if you have a task title 'watchify'. Regardless, if this helped you fix your issue, please upvote or select it as the correct answer. If you have more questions, comment them, and I'll do my best to answer.