Extract polyfills into a separate JS file

gulpfile.js

@@ -113,8 +113,11 @@ helpers.buildJS = function(site, minify) {
 	if(!site)   site   = 'shared';
 	if(!minify) minify = false;
 	
-	var src = ['site/patterns/shared/**/*.js'];
-	if(site !== 'shared') src.push('site/patterns/' + site + '/**/*.js');
+	var src = ['site/patterns/shared/**/*.js', '!site/patterns/shared/polyfills.js'];
+	if(site !== 'shared') {
+		src.push('site/patterns/'  + site + '/**/*.js');
+		src.push('!site/patterns/' + site + '/polyfills.js');
+	}
 
 	// Concat the JS files
 	var stream = gulp.src(src)
@@ -134,6 +137,38 @@ helpers.buildJS = function(site, minify) {
 	return stream.pipe(refresh());
 };
 	
+/**
+ * Builds the polyfills JS of the specified site
+ *
+ * @param  {string}  site   Site name, defaults to "shared" if not given
+ * @param  {boolean} minify Whether to minify using UglifyJS
+ * @return {stream}
+ */
+helpers.buildPolyfillsJS = function(site, minify) {
+	if(!site)   site   = 'shared';
+	if(!minify) minify = false;
+
+	var src = ['site/patterns/shared/polyfills.js'];
+	if(site !== 'shared') src.push('site/patterns/' + site + '/polyfills.js');
+
+	// Concat the JS files
+	var stream = gulp.src(src, {allowEmpty: true})
+	                 .pipe(concat('polyfills.js'))
+	                 .pipe(include({includePaths: __dirname + '/node_modules'}))
+	                 .pipe(helpers.banner('JS'))
+	                 .pipe(gulp.dest('assets/js'));
+
+	// Minify JS if required
+	if(minify) {
+		stream = stream.pipe(rename('polyfills.min.js'))
+		               .pipe(uglify({output: {comments: 'some'}}))
+		               .pipe(gulp.dest('assets/js'));
+	}
+
+	// Trigger LiveReload
+	return stream.pipe(refresh());
+};
+
 /**
  * Copies all files matching a specified pattern to the assets dir
  * Removes folder hierarchies so make sure that each file has a unique name!
@@ -186,6 +221,20 @@ gulp.task('js.min', function() {
 	return helpers.buildJS(site, true);
 });
 
+/**
+ * Combines the polyfills JS files of the current site
+ */
+gulp.task('polyfills', function() {
+	return helpers.buildPolyfillsJS(site);
+});
+
+/**
+ * Combines and minifies the polyfills JS files of the current site
+ */
+gulp.task('polyfills.min', function() {
+	return helpers.buildPolyfillsJS(site, true);
+});
+
 /**
  * Copies all webfonts to assets/fonts
  */
@@ -211,7 +260,7 @@ gulp.task('prismjs', function() {
 /**
  * Builds everything except the minified files for local development
  */
-gulp.task('default', gulp.series(gulp.parallel('fonts', 'img'), gulp.parallel('css', 'js', 'prismjs')));
+gulp.task('default', gulp.series(gulp.parallel('fonts', 'img'), gulp.parallel('css', 'js', 'polyfills', 'prismjs')));
 
 /**
  * Watches for changes
@@ -221,6 +270,7 @@ function watchwait() {
 	
 	gulp.watch('site/patterns/**/*.scss', gulp.series('css'));
 	gulp.watch('site/patterns/**/*.js', gulp.series('js'));
+	gulp.watch('site/patterns/*/polyfills.js', gulp.series('polyfills'));
 	gulp.watch('site/patterns/**/*.{woff,woff2,eot}', gulp.series('fonts'));
 	gulp.watch('site/patterns/**/*.{jpg,png,svg,ico}', gulp.series('img'));
 	
@@ -242,4 +292,4 @@ gulp.task('clean', function() {
 function prodclean() {
 	return del(['node_modules', 'gulpfile.js', 'site/patterns/*/', '!site/patterns/{shared,' + site + '}']);
 }
-gulp.task('prod', gulp.series('clean', gulp.parallel('fonts', 'img'), gulp.parallel('css.min', 'js.min', 'prismjs'), prodclean));
+gulp.task('prod', gulp.series('clean', gulp.parallel('fonts', 'img'), gulp.parallel('css.min', 'js.min', 'polyfills.min', 'prismjs'), prodclean));

package.json

@@ -8,21 +8,21 @@
 	"dependencies": {
 		"element-closest": "2.0.2",
 		"flexismooth": "1.0.0",
-		"prismjs": "1.6.0",
-		"whatwg-fetch": "2.0.3"
+		"prismjs": "1.15.0",
+		"whatwg-fetch": "3.0.0"
 	},
 	"devDependencies": {
-		"del": "^2.2.1",
-		"gulp": "gulpjs/gulp.git#4.0",
-		"gulp-autoprefixer": "^4.0.0",
-		"gulp-clean-css": "^3.4.1",
+		"del": "^3.0.0",
+		"gulp": "^4.0.0",
+		"gulp-autoprefixer": "^6.0.0",
+		"gulp-clean-css": "^3.10.0",
 		"gulp-concat": "^2.6.0",
-		"gulp-header": "^1.8.7",
+		"gulp-header": "^2.0.5",
 		"gulp-include": "^2.3.1",
 		"gulp-preservetime": "^1.0.0",
 		"gulp-refresh": "^1.1.0",
-		"gulp-rename": "^1.2.2",
-		"gulp-sass": "^3.1.0",
-		"gulp-uglify": "^3.0.0"
+		"gulp-rename": "^1.4.0",
+		"gulp-sass": "^4.0.2",
+		"gulp-uglify": "^3.0.1"
 	}
 }

site/snippets/footer.php

@@ -1,4 +1,8 @@
 		<?php pattern('shared/2-blocks/footer', ['pSite' => 'codesignd']) ?>
-		<?= js('assets/js/index' . c::get('assets.suffix') . '.js') ?>
+
+        <script>
+        window.fetch || document.write('<?= str_replace('/script', '\\/script', js('assets/js/polyfills' . c::get('assets.suffix') . '.js')) ?>')
+        </script>
+        <?= js('assets/js/index' . c::get('assets.suffix') . '.js') ?>
 	</body>
 </html>