Fix gulp watch task (#6117)

- revise watch & task syntax for Gulp v4 requirements
- ensure only one watcher gets created for file type paths

gulpfile.js/tasks/watch.js

@@ -2,16 +2,22 @@ var gulp = require('gulp');
 var path = require('path');
 var config = require('../config');
 
+
+const paths = config.apps.reduce((_, app) => ({
+    'styles:sass': [...(_['styles:sass'] || []), path.join('./client/**/*.scss'), path.join(app.sourceFiles, '*/scss/**')],
+    'styles:css': [...(_['styles:css'] || []), path.join(app.sourceFiles, '*/css/**')],
+    'scripts': [...(_['scripts'] || []), path.join(app.sourceFiles, '*/js/**')],
+    'images': [...(_['images'] || []), path.join(app.sourceFiles, '*/images/**')],
+    'fonts': [...(_['fonts'] || []), path.join(app.sourceFiles, '*/fonts/**')],
+}), {});
+
 /*
  * Watch - Watch files, trigger tasks when they are modified
  */
-gulp.task('watch', gulp.series('build'), function () {
-    config.apps.forEach(function(app) {
-        gulp.watch(path.join('./client/**/*.scss'), ['styles:sass']);
-        gulp.watch(path.join(app.sourceFiles, '*/scss/**'), ['styles:sass']);
-        gulp.watch(path.join(app.sourceFiles, '*/css/**'), ['styles:css']);
-        gulp.watch(path.join(app.sourceFiles, '*/js/**'), ['scripts']);
-        gulp.watch(path.join(app.sourceFiles, '*/images/**'), ['images']);
-        gulp.watch(path.join(app.sourceFiles, '*/fonts/**'), ['fonts']);
-    });
-});
+gulp.task('watch', gulp.series('build', function (cb) {
+    gulp.watch(paths['styles:sass'], gulp.series('styles:sass'));
+    gulp.watch(paths['styles:css'], gulp.series('styles:css'));
+    gulp.watch(paths['scripts'], gulp.series('scripts'));
+    gulp.watch(paths['images' ], gulp.series('images' ));
+    gulp.watch(paths['fonts' ], gulp.series('fonts' ));    
+}));