How to Gulp-Watch Multiple files?

Solution 1:

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']);

});

sass/**/*.scss and layouts/**/*.css will watch every directory and subdirectory for any changes to .scssand .css files that change. If you want to change that to any file make the last bit *.*

Solution 2:

You can write a watch like this.

gulp.task('watch', function() {
    gulp.watch('path/to/file', ['gulp task name for css/scss']);
    gulp.watch('path/to/file', ['gulp task name for js']);
});

This way you can set up as many tasks as you want via the file path of what you want to watch followed by the name of the task you created. Then you can write your default like this:

gulp.task('default', ['gulp task name for css/scss', 'gulp task name for js']);

If you want to simply watch for various file changes, then just watch files using glob like *.css in your task.