diff --git a/generators/app/templates/_package.json b/generators/app/templates/_package.json
index 899e629..ceef76a 100644
--- a/generators/app/templates/_package.json
+++ b/generators/app/templates/_package.json
@@ -73,15 +73,17 @@
     "coveralls": "^2.11.11"<% } %><% if ( manualTests || integrationTests ) { %>,
     "del": "^2.2.0",
     "globby": "^4.1.0",
-    "gulp": "^3.9.1",
-    "gulp-debug": "^2.1.2",
+    "gulp": "^4.0.0",
+    "gulp-cli": "^2.0.1",
+    "gulp-debug": "^4.0.0",
     "gulp-nunjucks-render": "^2.0.0",
     "gulp-plumber": "^1.1.0",
-    "gulp-sourcemaps": "^1.6.0",
-    "gulp-util": "^3.0.7",
-    "gulp-postcss": "^6.4.0",
-    "postcss-import": "^9.1.0",
+    "gulp-sourcemaps": "^2.6.4",
+    "gulp-postcss": "^7.0.1",
+    "postcss-import": "^11.1.0",
     "local-web-server": "^1.2.4",
+    "ansi-colors": "^2.0.5",
+    "fancy-log": "^1.3.2",
     "suitcss-components-test": "^1.0.0"<% } %><% if ( (manualTests || integrationTests) || (automatedTests && browserModule && !sassModule) ) { %>,
     "minimist": "^1.2.0"<% } %><% if ( (manualTests || integrationTests) || ((browserModule && !sassModule) && (transpile || automatedTests)) ) { %>,
     "webpack": "^4.12.0"<% } %><% if ( sassModule ) { %>,
diff --git a/generators/app/templates/gulpfile.js b/generators/app/templates/gulpfile.js
index 3f4ded9..08bd8c1 100644
--- a/generators/app/templates/gulpfile.js
+++ b/generators/app/templates/gulpfile.js
@@ -4,7 +4,8 @@ const path = require('path');
 const gulp = require('gulp');
 const sourcemaps = require('gulp-sourcemaps');
 const plumber = require('gulp-plumber');
-const gutil = require('gulp-util');
+const fancyLog = require('fancy-log');
+const colors = require('ansi-colors');
 const debug = require('gulp-debug');
 const nunjucks = require('gulp-nunjucks-render');
 const webpack = require('webpack');
@@ -25,17 +26,17 @@ const watch = args.watch;
 const port = 9000;
 
 function handleError ( msg ) {
-	gutil.log(gutil.colors.red(msg.message));
+	fancyLog(colors.red(msg.message));
 	this.emit('end');
 }
 
-gulp.task('test:cleanup', () => {
+function testCleanup () {
 	return del([
 		'./test-dist'
 	]);
-});
+}
 
-gulp.task('test:markup', ['test:cleanup'], () => {
+function testMarkup () {
 	function bundle () {
 		return gulp.src('./test/manual/**/*.html')
 			.pipe(plumber(handleError))
@@ -48,9 +49,9 @@ gulp.task('test:markup', ['test:cleanup'], () => {
 		gulp.watch(['./test/manual/**/*.html'], bundle);
 	}
 	return bundle();
-});
+}
 
-gulp.task('test:style', ['test:cleanup'], () => {
+function testStyle () {
 	function bundle () {
 		return gulp.src('./test/manual/**/*.css')
 			.pipe(plumber(handleError))
@@ -70,9 +71,9 @@ gulp.task('test:style', ['test:cleanup'], () => {
 		gulp.watch(['./test/manual/**/*.css'], bundle);
 	}
 	return bundle();
-});
+}
 
-gulp.task('test:script', ['test:cleanup'], () => {
+function testScript () {
 
 	return globby(['./test/manual/**/*.js'])
 		.then(( files ) => {
@@ -117,7 +118,7 @@ gulp.task('test:script', ['test:cleanup'], () => {
 					if ( err ) {
 						return reject(err);
 					}
-					gutil.log(stats.toString({
+					fancyLog(stats.toString({
 						colors: true
 					}));
 					return resolve();
@@ -133,9 +134,9 @@ gulp.task('test:script', ['test:cleanup'], () => {
 
 		});
 
-});
+}
 
-gulp.task('test:assets', ['test:cleanup'], () => {
+function testAssets () {
 	function bundle () {
 		return gulp.src('./test/manual/assets/**/*')
 			.pipe(gulp.dest('./test-dist/assets'))
@@ -145,11 +146,11 @@ gulp.task('test:assets', ['test:cleanup'], () => {
 		gulp.watch(['./test/manual/assets/**/*'], bundle);
 	}
 	return bundle();
-});
+}
 
-gulp.task('test:prepare', ['test:cleanup', 'test:markup', 'test:style', 'test:script', 'test:assets']);
+const testPrepare = parallel(testMarkup, testStyle, testScript, testAssets);
 
-gulp.task('test:local:manual', ['test:prepare'], () => {
+function testLocalManual () {
 	if ( watch ) {
 		ws({
 			'static': {
@@ -161,4 +162,12 @@ gulp.task('test:local:manual', ['test:prepare'], () => {
 		}).listen(port);
 		opn(`http://localhost:${port}`);
 	}
-});
+}
+
+module.exports['test:cleanup'] = testCleanup;
+module.exports['test:markup'] = series(testCleanup, testMarkup);
+module.exports['test:style'] = series(testCleanup, testStyle);
+module.exports['test:script'] = series(testCleanup, testScript);
+module.exports['test:assets'] = series(testCleanup, testAssets);
+module.exports['test:prepare'] = series(testCleanup, testPrepare);
+module.exports['test:local:manual'] = series(testCleanup, testPrepare, testLocalManual);
diff --git a/test/index.js b/test/index.js
index 907123c..f5ecf22 100644
--- a/test/index.js
+++ b/test/index.js
@@ -160,12 +160,12 @@ describe('Manual tests', function () {
 				'webpack': '^4.12.0',
 				'del': '^2.2.0',
 				'globby': '^4.1.0',
-				'gulp': '^3.9.1',
-				'gulp-debug': '^2.1.2',
+				'gulp': '^4.0.0',
+				'gulp-cli': '^2.0.1',
+				'gulp-debug': '^4.0.0',
 				'gulp-nunjucks-render': '^2.0.0',
 				'gulp-plumber': '^1.1.0',
-				'gulp-sourcemaps': '^1.6.0',
-				'gulp-util': '^3.0.7',
+				'gulp-sourcemaps': '^2.6.4',
 				'minimist': '^1.2.0',
 				'local-web-server': '^1.2.4',
 				'opn': '^4.0.2'
@@ -320,12 +320,12 @@ describe('Integration tests', function () {
 				'webpack': '^4.12.0',
 				'del': '^2.2.0',
 				'globby': '^4.1.0',
-				'gulp': '^3.9.1',
-				'gulp-debug': '^2.1.2',
+				'gulp': '^4.0.0',
+				'gulp-cli': '^2.0.1',
+				'gulp-debug': '^4.0.0',
 				'gulp-nunjucks-render': '^2.0.0',
 				'gulp-plumber': '^1.1.0',
-				'gulp-sourcemaps': '^1.6.0',
-				'gulp-util': '^3.0.7',
+				'gulp-sourcemaps': '^2.6.4',
 				'minimist': '^1.2.0',
 				'local-web-server': '^1.2.4',
 				'wdio-browserstack-service': '^0.1.16',