modularcode · modularcoder · Jul 14, 2019 · Jul 4, 2019
diff --git a/build/gulpfile.js b/build/gulpfile.js
@@ -1,89 +1,87 @@
-var glob = require('glob');
-var path = require('path');
 
 var gulp 	= require('gulp');
 var plugins = require('gulp-load-plugins')();
 
-var utils = require('./utils/utils');
-
 /********************************************
 *			Configs And Paths
 *********************************************/
 
 var config = require('../config/');
 var paths = config.paths;
 
-
 /********************************************
 *   		Load Build Tasks
 *********************************************/
 
-var buildTasks = utils.loadTasks(gulp, plugins, paths);
+// Dynamic Tasks with Gulp 4
+// https://cobwwweb.com/dynamic-tasks-gulp-4
+// With Gulp 4, it's not so simple.
+
+//var buildTasks = utils.loadTasks(gulp, plugins, paths);
+//gulp.task('build', buildTasks);
+
+const app_assets = require('./tasks/app-assets').task(gulp, plugins, paths);
+const app_pages = require('./tasks/app-pages').task(gulp, plugins, paths);
+const app_scripts = require('./tasks/app-scripts').task(gulp, plugins, paths);
+const app_styles = require('./tasks/app-styles').task(gulp, plugins, paths);
+const app_themes = require('./tasks/app-themes').task(gulp, plugins, paths);
 
-gulp.task('build', buildTasks);
+const vendor_assets = require('./tasks/vendor-assets').task(gulp, plugins, paths);
+const vendor_scripts = require('./tasks/vendor-scripts').task(gulp, plugins, paths);
+const vendor_styles = require('./tasks/vendor-styles').task(gulp, plugins, paths);
+
+const clean = (done) => {
+	// Error: Cannot delete files/directories outside the current 
+	// working directory. Can be overridden with the `force` option.
+	return require('del')([config.destDir], {force: true});
+};
+
+const build = gulp.parallel(
+	gulp.parallel(app_assets, app_scripts, app_pages, gulp.series(app_styles, app_themes)),
+	gulp.parallel(vendor_assets, vendor_scripts, vendor_styles)
+);
 
 /*********************************************
 *				 Other Tasks
 **********************************************/
 
 // Local server pointing on build folder
-gulp.task('connect', function() {
-	plugins.connect.server({
-		root: config.destDir,
-		port: config.port || 3333,
-		livereload: true
-	});
-});
-
-
-// Rerun the task when a file changes
-gulp.task('watch', function() {
-	// When template changes recompile .html pages
-	plugins.watch(paths.app.templates, function() {
-	    gulp.start('app-pages');
-	});
-
+const connect = () => {
+ 	return plugins.connect.server({
+ 		root: config.destDir,
+ 		port: config.port || 3333,
+ 		livereload: true
+ 	});
+};
+
+const watch = (done) => {
+ 	// When template changes recompile .html pages
+	gulp.watch(paths.app.templates, app_pages);
 	// When context file changes recompile .html pages
-	plugins.watch(config.srcDir + "/**/.context.js", function() {
-	    gulp.start('app-pages');
-	});
-
+	gulp.watch(config.srcDir + "/**/.context.js", app_pages);
 	// When script changes recompile scripts
-	plugins.watch(paths.app.scripts, function() {
-	    gulp.start('app-scripts');
-	});
-
+	gulp.watch(paths.app.scripts, app_scripts);
 	// When style changes recompile styles
-	plugins.watch(paths.app.styles, function() {
-	    gulp.start('app-styles');
-	});
-
+	gulp.watch(paths.app.styles, app_styles);
 	// When theme changes recompile themes
-	plugins.watch(paths.app.themes, function() {
-	    gulp.start('app-themes');
-	});
-});
+	gulp.watch(paths.app.themes, app_themes);
+
+	done();
+};
 
 // Builds and deploys to github pages
-gulp.task('deploy', ['build'], function() {
-	return gulp.src('../dist/**/*')
+const deploy = () => gulp.series(build, () => 
+	gulp.src('../dist/**/*')
 		.pipe(plugins.ghPages({
 			cacheDir: '../.deploy'
-		}));
-});
-
+		}))
+	);
 
+module.exports.deploy = deploy;
 
 /********************************************
 *				Main Tasks
 *********************************************/
 
-
-// // Run this task for development
-gulp.task('develop', [
-	'build',
-	'watch',
-	'connect'
-]);
-
-gulp.task('default', ['develop']);
+// Run this task for development
+module.exports.default = gulp.series(clean, build, gulp.parallel(watch, connect));
diff --git a/build/tasks/app-assets.js b/build/tasks/app-assets.js
@@ -1,7 +1,9 @@
 var config = require('../../config');
 
 module.exports.task = function(gulp, plugins, paths) {
-	gulp.src(paths.app.assets)
-		.pipe(gulp.dest(config.destDir + "/assets"))
-		.pipe(plugins.connect.reload());
+	return function app_assets() {
+		return gulp.src(paths.app.assets)
+			.pipe(gulp.dest(config.destDir + "/assets"))
+			.pipe(plugins.connect.reload());
+	};
 };
diff --git a/build/tasks/app-pages.js b/build/tasks/app-pages.js
@@ -16,57 +16,59 @@ var partials = {};
 
 module.exports.task = function(gulp, plugins, paths) {
 
-
-	// Register handlebars engine helpers and partials
-	handlebarsRegistrar(handlebars, {
-		helpers: paths.app.helpers,
-		partials: paths.app.templates,
-		parsePartialName: function (partial) {
-
-			// Save in partials vinyl registry
-			partials[partial.shortPath] = new File({
-				cwd: partial.cwd,
-				path: partial.path,
-				base: path.basename(partial.path),
-				contents: fs.readFileSync(partial.path)
-			});
-
-			return partial.shortPath;
-		},
-		bustCache: true,
-	});
+	return function app_pages() {
+
+		// Register handlebars engine helpers and partials
+		handlebarsRegistrar(handlebars, {
+			helpers: paths.app.helpers,
+			partials: paths.app.templates,
+			parsePartialName: function (partial) {
+
+				// Save in partials vinyl registry
+				partials[partial.shortPath] = new File({
+					cwd: partial.cwd,
+					path: partial.path,
+					base: path.basename(partial.path),
+					contents: fs.readFileSync(partial.path)
+				});
+
+				return partial.shortPath;
+			},
+			bustCache: true,
+		});
 
 
-	gulp.src(paths.app.pages)
-		// Render pages
-		.pipe(through.obj(function (file, enc, cb) {
-			file.contents = new Buffer(renderTemplate(file));
+		return gulp.src(paths.app.pages)
+			// Render pages
+			.pipe(through.obj(function (file, enc, cb) {
+				file.contents = Buffer.from(renderTemplate(file));
 
-			this.push(file);
-			cb();
-		}))
-		// Handle errors
-		.on('error', plugins.util.log)
+				this.push(file);
+				cb();
+			}))
+			// Handle errors
+			.on('error', plugins.util.log)
 
-		// Rename .page.hbs to .html
-		.pipe(plugins.rename(function (path) {
-			path.basename = path.basename.replace("-page", "");
-			path.extname = ".html"
-		}))
+			// Rename .page.hbs to .html
+			.pipe(plugins.rename(function (path) {
+				path.basename = path.basename.replace("-page", "");
+				path.extname = ".html"
+			}))
 
-		// Flatten structure
-		.pipe(plugins.flatten())
+			// Flatten structure
+			.pipe(plugins.flatten())
 
-		// pretify html structure
-		.pipe(plugins.prettify({
-			indent_size: 4
-		}))
+			// pretify html structure
+			.pipe(plugins.prettify({
+				indent_size: 4
+			}))
 
-		// Output
-		.pipe(gulp.dest(config.destDir))
+			// Output
+			.pipe(gulp.dest(config.destDir))
 
-		//Live-Reload
-		.pipe(plugins.connect.reload());
+			//Live-Reload
+			.pipe(plugins.connect.reload());
+	};
 
 };
 
@@ -145,7 +147,7 @@ function setFrontMatter(file) {
 	var content = frontMatter(file.contents.toString('utf8'));
 
 	// var res = new Buffer(content.body);
-	file.contents = new Buffer(content.body);
+	file.contents = Buffer.from(content.body);
 	file.frontMatter = content.attributes;
 
 	return file;

diff --git a/build/tasks/app-scripts.js b/build/tasks/app-scripts.js
@@ -1,8 +1,11 @@
 var config = require('../../config/');
 
 module.exports.task = function(gulp, plugins, paths) {
-	gulp.src(paths.app.scripts)
-		.pipe(plugins.concat('app.js'))
-		.pipe(gulp.dest(config.destDir + '/js'))
-		.pipe(plugins.connect.reload());
+	return function app_scripts() {
+		return gulp.src(paths.app.scripts)
+			.pipe(plugins.concat('app.js'))
+			.pipe(plugins.uglify())
+			.pipe(gulp.dest(config.destDir + '/js'))
+			.pipe(plugins.connect.reload());
+	};
 };
diff --git a/build/tasks/app-styles.js b/build/tasks/app-styles.js
@@ -2,19 +2,22 @@ var path = require('path');
 var config = require('../../config/');
 
 module.exports.task = function(gulp, plugins, paths) {
-
-	gulp.src(paths.app.styles)
-		.pipe(plugins.concat('app.scss'))
-		.pipe(
-			plugins.sass({
-				includePaths: [
-					path.resolve( config.srcDir ),
-					path.resolve( config.npmDir ),
-				]
-			})
-			.on('error', plugins.sass.logError)
-		)
-		.pipe(plugins.autoprefixer())
-		.pipe(gulp.dest(config.destDir + '/css'))
-		.pipe(plugins.connect.reload()).on( 'error', plugins.sass.logError );
+	return function app_styles() {
+		return gulp.src(paths.app.styles)
+			.pipe(plugins.concat('app.scss'))
+			.pipe(
+				plugins.sass({
+					includePaths: [
+						path.resolve( config.srcDir ),
+						path.resolve( config.npmDir ),
+					]
+				})
+				.on('error', plugins.sass.logError)
+			)
+			.pipe(plugins.autoprefixer())
+			// TODO minify
+			.pipe(gulp.dest(config.destDir + '/css'))
+			.pipe(plugins.connect.reload())
+			.on( 'error', plugins.sass.logError );
+	};
 };
diff --git a/build/tasks/app-themes.js b/build/tasks/app-themes.js
@@ -4,32 +4,34 @@ var glob = require('glob');
 
 module.exports.task = function(gulp, plugins, paths) {
 
-	// For each theme file
-	glob.sync(paths.app.themes).forEach(function(filePath) {
+	return function app_themes(done) {
+		// For each theme file
+		glob.sync(paths.app.themes).forEach(function(filePath) {
 
-		// Prepend file to styles glob
-		var src = [].concat(paths.app.styles);
+			// Prepend file to styles glob
+			var src = [].concat(paths.app.styles);
 			src.unshift(filePath);
 
-		// Theme name
-		var name = "app-" + path.basename(filePath, '.js').replace("-theme", "");
-
-		gulp.src(src)
-			.pipe(plugins.concat(name))
-			.pipe(
-				plugins.sass({
-					includePaths: [
-						path.resolve( config.srcDir ),
-						path.resolve( config.npmDir ),
-					]
-				})
-				.on('error', plugins.sass.logError)
-			)
-			.pipe(plugins.autoprefixer())
-			.pipe(gulp.dest(config.destDir + '/css'))
-			.pipe(plugins.connect.reload());
-
-	});
+			// Theme name
+			var name = "app-" + path.basename(filePath, '.js').replace("-theme", "");
+
+			gulp.src(src)
+				.pipe(plugins.concat(name))
+				.pipe(
+					plugins.sass({
+						includePaths: [
+							path.resolve( config.srcDir ),
+							path.resolve( config.npmDir ),
+						]
+					})
+					.on('error', plugins.sass.logError)
+				)
+				.pipe(plugins.autoprefixer())
+				.pipe(gulp.dest(config.destDir + '/css'))
+				.pipe(plugins.connect.reload());
+		});
+		done();
+	};
 
 };