upgrade to gulp 4

gulpfile.js

@@ -2,7 +2,7 @@
 
 const fs = require('fs');
 const gulp = require('gulp');
-const runSequence = require('run-sequence');
+const { parallel, series } = require('gulp');
 const useref = require('gulp-useref');
 const cleanCSS = require('gulp-clean-css');
 const rename = require('gulp-rename');
@@ -23,12 +23,13 @@ function minifyJs(fileName) {
 	).code;
 	fs.writeFileSync(fileName, minifiedContent);
 	console.log(
-		`[${fileName}]: ${content.length / 1024}K -> ${minifiedContent.length /
+		`[${fileName}]: ${content.length / 1024}K -> ${
-			1024}K`
+			minifiedContent.length / 1024
+		}K`
 	);
 }
 gulp.task('runWebpack', function () {
-	return child_process.execSync('yarn run build');
+	return child_process.exec('npm run build');
 });
 
 gulp.task('copyFiles', function () {
@@ -56,7 +57,7 @@ gulp.task('copyFiles', function() {
 				'src/detached-window.js',
 				'src/icon-48.png',
 				'src/icon-128.png',
-				'manifest.json'
+				'src/manifest.json',
 			])
 			.pipe(gulp.dest('app')),
 
@@ -93,17 +94,14 @@ gulp.task('copyFiles', function() {
 				'src/FiraCode.ttf',
 				'src/FixedSys.ttf',
 				'src/Inconsolata.ttf',
-				'src/Monoid.ttf'
+				'src/Monoid.ttf',
 			])
 			.pipe(gulp.dest('app'))
 	);
 });
 
 gulp.task('useRef', function () {
-	return gulp
+	return gulp.src('build/index.html').pipe(useref()).pipe(gulp.dest('app'));
-		.src('build/index.html')
-		.pipe(useref())
-		.pipe(gulp.dest('app'));
 });
 
 gulp.task('concatSwRegistration', function () {
@@ -123,13 +121,11 @@ gulp.task('minify', function() {
 		.pipe(
 			cleanCSS(
 				{
-					debug: true
+					debug: true,
 				},
-				details => {
+				(details) => {
 					console.log(
-						`${details.name}: ${details.stats.originalSize} 👉🏼  ${
+						`${details.name}: ${details.stats.originalSize} 👉🏼  ${details.stats.minifiedSize}`
-							details.stats.minifiedSize
-						}`
 					);
 				}
 			)
@@ -137,7 +133,7 @@ gulp.task('minify', function() {
 		.pipe(gulp.dest('app'));
 });
 
-gulp.task('fixIndex', function() {
+gulp.task('fixIndex', function (cb) {
 	var contents = fs.readFileSync('build/index.html', 'utf8');
 	// Replace hashed-filename script tags with unhashed ones
 	contents = contents.replace(
@@ -152,6 +148,7 @@ gulp.task('fixIndex', function() {
 	);
 
 	fs.writeFileSync('build/index.html', contents, 'utf8');
+	cb();
 });
 
 gulp.task('generate-service-worker', function (callback) {
@@ -162,12 +159,12 @@ gulp.task('generate-service-worker', function(callback) {
 		`${rootDir}/service-worker.js`,
 		{
 			staticFileGlobs: [
-				rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}'
+				rootDir + '/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}',
 			],
 			stripPrefix: `${rootDir}/`,
 
 			// has to be increased to around 2.8mb for sass.worker.js
-			maximumFileSizeToCacheInBytes: 2900000
+			maximumFileSizeToCacheInBytes: 2900000,
 		},
 		callback
 	);
@@ -196,30 +193,30 @@ gulp.task('packageExtension', function() {
 });
 
 gulp.task('buildWebsite', function () {
-	return child_process.execSync('yarn run build-website');
+	return child_process.exec('npm run build-website');
 });
 
-gulp.task('buildDistFolder', function() {
+gulp.task('buildDistFolder', function (cb) {
 	child_process.execSync('rm -rf dist');
 	child_process.execSync('mv packages/website/_site dist');
 	child_process.execSync('mv app dist/');
+	cb();
 });
 
 gulp.task('cleanup', function () {
-	return child_process.execSync('rm -rf build');
+	return child_process.exec('rm -rf build');
 });
 
 gulp.task('start-preview-server', function () {
 	connect.server({
 		root: 'preview',
 		port: 7888,
-		https: false
+		https: false,
 	});
 });
 
-gulp.task('release', function(callback) {
+exports.release = series(
-	runSequence(
+	parallel('runWebpack', 'buildWebsite'),
-		['runWebpack', 'buildWebsite'],
 	'copyFiles',
 	'fixIndex',
 	'useRef',
@@ -238,25 +235,14 @@ gulp.task('release', function(callback) {
 		callback(error);
 	}
 );
-});
 
-gulp.task('dev-release', function(callback) {
+exports.devRelease = gulp.series(
-	runSequence(
+	parallel('runWebpack', 'buildWebsite'),
-		['runWebpack', 'buildWebsite'],
 	'copyFiles',
 	'fixIndex',
 	'useRef',
 	'concatSwRegistration',
 	'generate-service-worker',
 	'buildDistFolder',
-		'cleanup',
+	'cleanup'
-		function(error) {
-			if (error) {
-				console.log(error.message);
-			} else {
-				console.log('DEV RELEASE FINISHED SUCCESSFULLY');
-			}
-			callback(error);
-		}
 );
-});

package.json

@@ -44,7 +44,7 @@
 		"eslint": "^4.9.0",
 		"eslint-config-prettier": "^2.3.0",
 		"eslint-config-synacor": "^2.0.2",
-		"gulp": "^3.9.1",
+		"gulp": "^4.0.2",
 		"gulp-clean-css": "^3.9.2",
 		"gulp-concat": "^2.6.1",
 		"gulp-connect": "^5.7.0",
@@ -63,7 +63,6 @@
 		"merge-stream": "^1.0.1",
 		"preact-cli": "^3.0.0-rc.3",
 		"preact-render-spy": "^1.2.1",
-		"run-sequence": "^2.2.1",
 		"sw-precache": "^5.2.0"
 	},
 	"dependencies": {
@@ -75,10 +74,10 @@
 		"esprima": "^4.0.0",
 		"firebase": "^5.5.8",
 		"jszip": "^3.1.5",
-		"preact": "^10.0.0-rc.0",
+		"preact": "^10.5.10",
 		"preact-portal": "^1.1.3",
-		"preact-router": "^2.5.7",
+		"preact-router": "^3.2.1",
-		"prettier": "^1.18.2",
+		"prettier": "^2.2.1",
 		"react-inspector": "^2.3.0",
 		"split.js": "^1.5.11"
 	},

preact.config.js

@@ -15,7 +15,7 @@ export default function(config, env, helpers) {
 	)[0];
 	Object.assign(htmlWebpackPlugin.plugin.options.minify, {
 		removeComments: false,
-		collapseWhitespace: false
+		collapseWhitespace: false,
 	});
 	htmlWebpackPlugin.plugin.options.preload = false;
 	htmlWebpackPlugin.plugin.options.favicon = false;
@@ -45,9 +45,13 @@ export default function(config, env, helpers) {
 			config,
 			'SWPrecacheWebpackPlugin'
 		)[0];
+		if (swPlugin) {
 			config.plugins.splice(swPlugin.index, 1);
+		}
 
 		const uglifyPlugin = helpers.getPluginsByName(config, 'UglifyJsPlugin')[0];
+		if (uglifyPlugin) {
 			config.plugins.splice(uglifyPlugin.index, 1);
 		}
 	}
+}