Convert gulpfile to gulp 4

gulpfile.js

@@ -10,7 +10,6 @@ const gulpif = require("gulp-if");
 const log = require("fancy-log");
 const plumber = require("gulp-plumber");
 const replaceExt = require("replace-ext");
-const sequence = require("run-sequence");
 const sass = require("gulp-sass");
 const source = require("vinyl-source-stream");
 const sourcemaps = require("gulp-sourcemaps");
@@ -32,18 +31,25 @@ const FONT_AWESOME_OUT_DIR = "spectabular/webfonts";
 
 //Map the various directories to the gulp tasks
 const WATCH_MAPPINGS = {
-	[TS_SRC_DIR]: ["typescript-lint", "typescript"],
+	[TS_SRC_DIR]: ["typescript"],
 	[SASS_SRC_DIR]: ["sass"],
 	[TWIG_SRC_DIR]: ["twig"],
 };
-
 let isProdBuild = yargs.argv.hasOwnProperty("prod");
 
-gulp.task("build", (callback) => {
-	sequence("gulpfile-lint", "typescript-lint", "typescript", "fontawesome", "sass", "twig", callback);
-});
+function buildAll(done) {
+	return gulp.series(
+		"lint-gulpfile",
+		gulp.parallel(
+			"typescript",
+			"sass",
+			"twig",
+			"fontawesome"
+		)
+	)(done);
+}
 
-gulp.task("clean", () => {
+function clean() {
 	return del([
 		JS_OUT_DIR,
 		CSS_OUT_DIR,
@@ -52,9 +58,9 @@ gulp.task("clean", () => {
 	].map((folder) => {
 		return path.join(folder, "*");
 	}));
-});
+}
 
-gulp.task("watch", () => {
+function watch(done) {
 	Object.keys(WATCH_MAPPINGS).forEach((dir) => {
 		let globbedPath = path.join(dir, "*");
 		let tasks = WATCH_MAPPINGS[dir];
@@ -64,9 +70,27 @@ gulp.task("watch", () => {
 			log(`[${chalk.blue(tasks.join(", "))}] Change detected: ${chalk.green(relativePath)}`);
 		});
 	});
-});
+	done();
+};
 
-gulp.task("typescript", (callback) => {
+function lintGulpfile() {
+	return gulp.src("gulpfile.js")
+		.pipe(plumber())
+		.pipe(eslint())
+		.pipe(eslint.format("stylish"))
+		.pipe(eslint.failAfterError());
+}
+
+function lintTypescript() {
+	return gulp.src(path.join(TS_SRC_DIR, "*.ts"))
+		.pipe(plumber())
+		.pipe(tslint({
+			formatter: "stylish"
+		}))
+		.pipe(tslint.report());
+}
+
+function compileTypescript(done) {
 	let promises = TS_ENTRYPOINTS.map(async (entrypoint) => {
 		let entrypointPath = path.join(TS_SRC_DIR, entrypoint);
 		let bundler = browserify(entrypointPath, {debug: !isProdBuild})
@@ -80,11 +104,11 @@ gulp.task("typescript", (callback) => {
 	});
 
 	Promise.all(promises).then(() => {
-		callback();
-	});
+		done();
 	});
+}
 
-gulp.task("sass", () => {
+function compileSass() {
 	return gulp.src(path.join(SASS_SRC_DIR, "*.scss"))
 		.pipe(plumber())
 		.pipe(sourcemaps.init())
@@ -93,34 +117,26 @@ gulp.task("sass", () => {
 		}).on("error", sass.logError))
 		.pipe(gulpif(!isProdBuild, sourcemaps.write()))
 		.pipe(gulp.dest(CSS_OUT_DIR));
-});
+}
 
-gulp.task("twig", () => {
+function copyTwig() {
 	return gulp.src(path.join(TWIG_SRC_DIR, "*.{html,html.twig}"))
 		.pipe(gulp.dest(TWIG_OUT_DIR));
-});
+}
 
-gulp.task("gulpfile-lint", () => {
-	return gulp.src("gulpfile.js")
-		.pipe(plumber())
-		.pipe(eslint())
-		.pipe(eslint.format("stylish"))
-		.pipe(eslint.failAfterError());
-});
-
-gulp.task("typescript-lint", () => {
-	return gulp.src(path.join(TS_SRC_DIR, "*.ts"))
-		.pipe(plumber())
-		.pipe(tslint({
-			formatter: "stylish"
-		}))
-		.pipe(tslint.report());
-});
-
-gulp.task("fontawesome", () => {
+function copyFontawesome() {
 	return gulp.src([
 		path.join(FONT_AWESOME_BASE_DIR, "webfonts/*"),
 		path.join(FONT_AWESOME_BASE_DIR, "LICENSE.txt")
 	])
 		.pipe(gulp.dest(FONT_AWESOME_OUT_DIR));
-});
+}
+
+gulp.task("typescript", gulp.series(lintTypescript, compileTypescript));
+gulp.task("sass", compileSass);
+gulp.task("twig", copyTwig);
+gulp.task("fontawesome", copyFontawesome);
+gulp.task("lint-gulpfile", lintGulpfile);
+gulp.task(watch);
+gulp.task("default", buildAll);
+gulp.task(clean);

package.json

@@ -14,7 +14,7 @@
     "del": "^3.0.0",
     "eslint": "^5.0.1",
     "fancy-log": "^1.3.2",
-    "gulp": "^3.9.1",
+    "gulp": "^4.0.0",
     "gulp-eslint": "^4.0.2",
     "gulp-if": "^2.0.2",
     "gulp-plumber": "^1.2.0",