Upgrade Gulp to v4 (#6809)

src/Umbraco.Web.UI.Client/gulp/config.js

@@ -3,26 +3,26 @@
 module.exports = {
     sources: {
 
-        //less files used by backoffice and preview
-        //processed in the less task
+        // less files used by backoffice and preview
+        // processed in the less task
         less: {
-            installer: { files: ["./src/less/installer.less"], out: "installer.css" },
-            nonodes: { files: ["./src/less/pages/nonodes.less"], out: "nonodes.style.min.css"},
-            preview: { files: ["./src/less/canvas-designer.less"], out: "canvasdesigner.css" },
-            umbraco: { files: ["./src/less/belle.less"], out: "umbraco.css" },
-            rteContent: { files: ["./src/less/rte-content.less"], out: "rte-content.css" }
+            installer: { files: "./src/less/installer.less", watch: "./src/less/**/*.less", out: "installer.css" },
+            nonodes: { files: "./src/less/pages/nonodes.less", watch: "./src/less/**/*.less", out: "nonodes.style.min.css"},
+            preview: { files: "./src/less/canvas-designer.less", watch: "./src/less/**/*.less", out: "canvasdesigner.css" },
+            umbraco: { files: "./src/less/belle.less", watch: "./src/less/**/*.less", out: "umbraco.css" },
+            rteContent: { files: "./src/less/rte-content.less", watch: "./src/less/**/*.less", out: "rte-content.css" }
         },
 
-        //js files for backoffie
-        //processed in the js task
+        // js files for backoffice
+        // processed in the js task
         js: {
-            preview: { files: ["./src/preview/**/*.js"], out: "umbraco.preview.js" },
-            installer: { files: ["./src/installer/**/*.js"], out: "umbraco.installer.js" },
-            filters: { files: ["./src/common/filters/**/*.js"], out: "umbraco.filters.js" },
-            resources: { files: ["./src/common/resources/**/*.js"], out: "umbraco.resources.js" },
-            services: { files: ["./src/common/services/**/*.js"], out: "umbraco.services.js" },
-            security: { files: ["./src/common/interceptors/**/*.js"], out: "umbraco.interceptors.js" },
-
+            preview: { files: "./src/preview/**/*.js", out: "umbraco.preview.js" },
+            installer: { files: "./src/installer/**/*.js", out: "umbraco.installer.js" },
+            filters: { files: "./src/common/filters/**/*.js", out: "umbraco.filters.js" },
+            resources: { files: "./src/common/resources/**/*.js", out: "umbraco.resources.js" },
+            services: { files: "./src/common/services/**/*.js", out: "umbraco.services.js" },
+            security: { files: "./src/common/interceptors/**/*.js", out: "umbraco.interceptors.js" },
+            
             //the controllers for views
             controllers: {
                 files: [
@@ -42,13 +42,16 @@ module.exports = {
                 ],
                 out: "umbraco.directives.js"
             }
+            
         },
 
         //selectors for copying all views into the build
         //processed in the views task
         views:{
-            umbraco: {files: ["./src/views/**/*.html"], folder: ""},
-            installer: {files: ["./src/installer/steps/*.html"], folder: "install/"}
+            views: {files: "./src/views/**/*.html", folder: ""},
+            directives: {files: "./src/common/directives/**/*.html", folder: ""},
+            components: {files: "./src/common/components/**/*.html", folder: ""},
+            installer: {files: "./src/installer/steps/*.html", folder: "install/"}
         },
 
         //globs for file-watching

src/Umbraco.Web.UI.Client/gulp/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-var fs = require('fs');
-
-var onlyScripts = require('./util/scriptFilter');
-var tasks = fs.readdirSync('./gulp/tasks/').filter(onlyScripts);
-
-tasks.forEach(function(task) {
-	require('./tasks/' + task);
-});

src/Umbraco.Web.UI.Client/gulp/tasks/build.js

@@ -1,10 +0,0 @@
-'use strict';
-
-var config = require('../config');
-var gulp = require('gulp');
-var runSequence = require('run-sequence');
-
-// Build - build the files ready for production
-gulp.task('build', function(cb) {
-    runSequence(["js", "dependencies", "less", "views"], "test:unit", cb);
-});

src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js

@@ -10,7 +10,7 @@ var imagemin = require('gulp-imagemin');
 /**************************
  * Task processes and copies all dependencies, either installed by npm or stored locally in the project
  **************************/
-gulp.task('dependencies', function () {
+function dependencies() {
 
     //as we do multiple things in this task, we merge the multiple streams
     var stream = new MergeStream();
@@ -244,21 +244,21 @@ gulp.task('dependencies', function () {
     nodeModules.forEach(module => {
         stream.add(
             gulp.src(module.src,
-                { base: module.base })
+                { base: module.base, allowEmpty: true })
                 .pipe(gulp.dest(config.root + config.targets.lib + "/" + module.name))
         );
     });
 
     //copy over libs which are not on npm (/lib)
     stream.add(
-         gulp.src(config.sources.globs.lib)
+        gulp.src(config.sources.globs.lib, { allowEmpty: true })
             .pipe(gulp.dest(config.root + config.targets.lib))
         );
 
     //Copies all static assets into /root / assets folder
     //css, fonts and image files
     
-    var assetsTask = gulp.src(config.sources.globs.assets);
+    var assetsTask = gulp.src(config.sources.globs.assets, { allowEmpty: true });
     if (global.isProd === true) {
         assetsTask = assetsTask.pipe(imagemin([
             imagemin.gifsicle({interlaced: true}),
@@ -277,21 +277,23 @@ gulp.task('dependencies', function () {
     stream.add(assetsTask);
 
     // Copies all the less files related to the preview into their folder
-    //these are not pre-processed as preview has its own less combiler client side
+    //these are not pre-processed as preview has its own less compiler client side
     stream.add(
-            gulp.src("src/canvasdesigner/editors/*.less")
+        gulp.src("src/canvasdesigner/editors/*.less", { allowEmpty: true })
                 .pipe(gulp.dest(config.root + config.targets.assets + "/less"))
         );
 
-	// Todo: check if we need these fileSize
+	// TODO: check if we need these fileSize
     stream.add(
-            gulp.src("src/views/propertyeditors/grid/config/*.*")
+        gulp.src("src/views/propertyeditors/grid/config/*.*", { allowEmpty: true })
                 .pipe(gulp.dest(config.root + config.targets.views + "/propertyeditors/grid/config"))
         );
     stream.add(
-            gulp.src("src/views/dashboard/default/*.jpg")
+        gulp.src("src/views/dashboard/default/*.jpg", { allowEmpty: true })
                 .pipe(gulp.dest(config.root + config.targets.views + "/dashboard/default"))
         );
 
     return stream;
-});
+};
+
+module.exports = { dependencies: dependencies };

src/Umbraco.Web.UI.Client/gulp/tasks/dev.js

@@ -1,13 +0,0 @@
-'use strict';
-
-var config = require('../config');
-var gulp = require('gulp');
-var runSequence = require('run-sequence');
-
-// Dev - build the files ready for development and start watchers
-gulp.task('dev', function (cb) {
-
-    global.isProd = false;
-
-    runSequence(["dependencies", "js", "less", "views"], "watch", cb);
-});

src/Umbraco.Web.UI.Client/gulp/tasks/js.js

@@ -9,21 +9,24 @@ var MergeStream = require('merge-stream');
 var processJs = require('../util/processJs');
 
 /**************************
- * Copies all angular JS files into their seperate umbraco.*.js file
+ * Copies all angular JS files into their separate umbraco.*.js file
  **************************/
-gulp.task('js', function () {
+function js() {
 
     //we run multiple streams, so merge them all together
     var stream = new MergeStream();
 
     stream.add(
-        gulp.src(config.sources.globs.js)
-            .pipe(gulp.dest(config.root + config.targets.js))
-        );
+        gulp.src(config.sources.globs.js).pipe( gulp.dest(config.root + config.targets.js) )
+    );
 
-     _.forEach(config.sources.js, function (group) {
-        stream.add (processJs(group.files, group.out) );
-     });
+    _.forEach(config.sources.js, function (group) {
+        stream.add(
+            processJs(group.files, group.out)
+        );
+    });
 
      return stream;
-});
+};
+
+module.exports = { js: js };

src/Umbraco.Web.UI.Client/gulp/tasks/less.js

@@ -1,14 +1,13 @@
 'use strict';
 
 var config = require('../config');
-var gulp = require('gulp');
 
 var _ = require('lodash');
 var MergeStream = require('merge-stream');
 
 var processLess = require('../util/processLess');
 
-gulp.task('less', function () {
+function less() {
 
     var stream = new MergeStream();
 
@@ -17,4 +16,6 @@ gulp.task('less', function () {
     });
 
     return stream;
-});
+};
+
+module.exports = { less: less };

src/Umbraco.Web.UI.Client/gulp/tasks/removeProductionMode.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var gulp = require('gulp');
+var through2 = require('through2');
+
+function createEmptyStream() {
+    var pass = through2.obj();
+    process.nextTick(pass.end.bind(pass));
+    return pass;
+}
+
+/**************************
+ * Copies all angular JS files into their separate umbraco.*.js file
+ **************************/
+function removeProductionMode() {
+    
+    global.isProd = false;
+    
+	return createEmptyStream();
+};
+
+module.exports = { removeProductionMode: removeProductionMode };

src/Umbraco.Web.UI.Client/gulp/tasks/test.js

@@ -1,32 +1,27 @@
 'use strict';
 
-var config = require('../config');
-var gulp = require('gulp');
 var karmaServer = require('karma').Server;
-var runSequence = require('run-sequence');
 
 /**************************
  * Build tests
  **************************/
 
  // Karma test
-gulp.task('runTests', function(cb) {
-    runSequence("js", "test:unit", cb);
-});
+function testUnit() {
 
-gulp.task('test:unit', function () {
-
-    new karmaServer({
+    return new karmaServer({
         configFile: __dirname + "/../../test/config/karma.conf.js",
         keepalive: true
     })
     .start();
-});
+};
 
-gulp.task('test:e2e', function() {
-    new karmaServer({
+function testE2e() {
+    return new karmaServer({
         configFile: __dirname + "/../../test/config/e2e.js",
         keepalive: true
     })
     .start();
-});
+};
+
+module.exports = { testUnit: testUnit, testE2e: testE2e };

src/Umbraco.Web.UI.Client/gulp/tasks/views.js

@@ -6,7 +6,7 @@ var gulp = require('gulp');
 var _ = require('lodash');
 var MergeStream = require('merge-stream');
 
-gulp.task('views', function () {
+function views() {
 
     var stream = new MergeStream();
 
@@ -22,4 +22,7 @@ gulp.task('views', function () {
     });
 
     return stream;
-});
+};
+
+module.exports = { views: views };
+

src/Umbraco.Web.UI.Client/gulp/tasks/watch.js

@@ -1,58 +0,0 @@
-'use strict';
-
-var config = require('../config');
-var gulp = require('gulp');
-
-var _ = require('lodash');
-var MergeStream = require('merge-stream');
-
-var processJs = require('../util/processJs');
-
-var watch = require('gulp-watch');
-
-gulp.task('watch', function () {
-
-    var stream = new MergeStream();
-    var watchInterval = 500;
-
-    //Setup a watcher for all groups of javascript files
-    _.forEach(config.sources.js, function (group) {
-
-        if(group.watch !== false){
-
-            stream.add(
-
-                watch(group.files, { ignoreInitial: true, interval: watchInterval }, function (file) {
-
-                    console.info(file.path + " has changed, added to:  " + group.out);
-                    processJs(group.files, group.out);
-
-                })
-
-            );
-
-        }
-
-    });
-
-    stream.add(
-        //watch all less files and trigger the less task
-        watch(config.sources.globs.less, { ignoreInitial: true, interval: watchInterval }, function () {
-            gulp.run(['less']);
-        })
-    );
-
-    //watch all views - copy single file changes
-    stream.add(
-        watch(config.sources.globs.views, { interval: watchInterval })
-        .pipe(gulp.dest(config.root + config.targets.views))
-    );
-
-    //watch all app js files that will not be merged - copy single file changes
-    stream.add(
-        watch(config.sources.globs.js, { interval: watchInterval })
-        .pipe(gulp.dest(config.root + config.targets.js))
-    );
-    
-    return stream;
-});

src/Umbraco.Web.UI.Client/gulp/tasks/watchTask.js

@@ -0,0 +1,44 @@
+'use strict';
+
+const config = require('../config');
+const {watch, parallel, dest, src} = require('gulp');
+
+var _ = require('lodash');
+var MergeStream = require('merge-stream');
+
+var processJs = require('../util/processJs');
+var processLess = require('../util/processLess');
+
+//const { less } = require('./less');
+//const { views } = require('./views');
+
+
+function watchTask(cb) {
+    
+    var watchInterval = 500;
+    
+    //Setup a watcher for all groups of JS files
+    _.forEach(config.sources.js, function (group) {
+        if(group.watch !== false) {
+            watch(group.files, { ignoreInitial: true, interval: watchInterval }, function JS_Group_Compile() { return processJs(group.files, group.out) })
+        }
+    });
+
+    //Setup a watcher for all groups of LESS files
+    _.forEach(config.sources.less, function (group) {
+        if(group.watch !== false) {
+            watch(group.watch, { ignoreInitial: true, interval: watchInterval }, function Less_Group_Compile() { processLess(group.files, group.out) })
+        }
+    });
+    
+    //Setup a watcher for all groups of view files
+    _.forEach(config.sources.views, function (group) {
+        if(group.watch !== false) {
+            watch(group.files, { ignoreInitial: true, interval: watchInterval }, function View_Group_Compile() { processLess(group.files, group.out) })
+        }
+    });
+    
+    return cb();
+};
+
+module.exports = { watchTask: watchTask };

src/Umbraco.Web.UI.Client/gulp/util/processJs.js

@@ -11,6 +11,8 @@ var embedTemplates = require('gulp-angular-embed-templates');
 
 module.exports = function (files, out) {
 
+    console.log("JS: ", files, " -> ", config.root + config.targets.js + out)
+
     var task = gulp.src(files);
 
     // check for js errors

src/Umbraco.Web.UI.Client/gulp/util/processLess.js

@@ -15,7 +15,9 @@ module.exports = function(files, out) {
         autoprefixer,
         cssnano({zindex: false})
     ];
-
+    
+    console.log("LESS: ", files, " -> ", config.root + config.targets.js + out)
+    
     var task = gulp.src(files)
         .pipe(less())
         .pipe(cleanCss())