Browse Source

Extract polyfills into a separate JS file

master
Lukas Bestle 8 months ago
parent
commit
93ab1a7f3b
3 changed files with 61 additions and 7 deletions
  1. 55
    5
      gulpfile.js
  2. 1
    1
      site/patterns
  3. 5
    1
      site/snippets/footer.php

+ 55
- 5
gulpfile.js View File

@@ -113,9 +113,12 @@ helpers.buildJS = function(site, minify) {
113 113
 	if(!site)   site   = 'shared';
114 114
 	if(!minify) minify = false;
115 115
 	
116
-	var src = ['site/patterns/shared/**/*.js'];
117
-	if(site !== 'shared') src.push('site/patterns/' + site + '/**/*.js');
118
-	
116
+	var src = ['site/patterns/shared/**/*.js', '!site/patterns/shared/polyfills.js'];
117
+	if(site !== 'shared') {
118
+		src.push('site/patterns/'  + site + '/**/*.js');
119
+		src.push('!site/patterns/' + site + '/polyfills.js');
120
+	}
121
+
119 122
 	// Concat the JS files
120 123
 	var stream = gulp.src(src)
121 124
 	                 .pipe(concat('index.js'))
@@ -129,7 +132,39 @@ helpers.buildJS = function(site, minify) {
129 132
 		               .pipe(uglify({output: {comments: 'some'}}))
130 133
 		               .pipe(gulp.dest('assets/js'));
131 134
 	}
135
+
136
+	// Trigger LiveReload
137
+	return stream.pipe(refresh());
138
+};
132 139
 	
140
+/**
141
+ * Builds the polyfills JS of the specified site
142
+ *
143
+ * @param  {string}  site   Site name, defaults to "shared" if not given
144
+ * @param  {boolean} minify Whether to minify using UglifyJS
145
+ * @return {stream}
146
+ */
147
+helpers.buildPolyfillsJS = function(site, minify) {
148
+	if(!site)   site   = 'shared';
149
+	if(!minify) minify = false;
150
+
151
+	var src = ['site/patterns/shared/polyfills.js'];
152
+	if(site !== 'shared') src.push('site/patterns/' + site + '/polyfills.js');
153
+
154
+	// Concat the JS files
155
+	var stream = gulp.src(src, {allowEmpty: true})
156
+	                 .pipe(concat('polyfills.js'))
157
+	                 .pipe(include({includePaths: __dirname + '/node_modules'}))
158
+	                 .pipe(helpers.banner('JS'))
159
+	                 .pipe(gulp.dest('assets/js'));
160
+
161
+	// Minify JS if required
162
+	if(minify) {
163
+		stream = stream.pipe(rename('polyfills.min.js'))
164
+		               .pipe(uglify({output: {comments: 'some'}}))
165
+		               .pipe(gulp.dest('assets/js'));
166
+	}
167
+
133 168
 	// Trigger LiveReload
134 169
 	return stream.pipe(refresh());
135 170
 };
@@ -186,6 +221,20 @@ gulp.task('js.min', function() {
186 221
 	return helpers.buildJS(site, true);
187 222
 });
188 223
 
224
+/**
225
+ * Combines the polyfills JS files of the current site
226
+ */
227
+gulp.task('polyfills', function() {
228
+	return helpers.buildPolyfillsJS(site);
229
+});
230
+
231
+/**
232
+ * Combines and minifies the polyfills JS files of the current site
233
+ */
234
+gulp.task('polyfills.min', function() {
235
+	return helpers.buildPolyfillsJS(site, true);
236
+});
237
+
189 238
 /**
190 239
  * Copies all webfonts to assets/fonts
191 240
  */
@@ -211,7 +260,7 @@ gulp.task('prismjs', function() {
211 260
 /**
212 261
  * Builds everything except the minified files for local development
213 262
  */
214
-gulp.task('default', gulp.series(gulp.parallel('fonts', 'img'), gulp.parallel('css', 'js', 'prismjs')));
263
+gulp.task('default', gulp.series(gulp.parallel('fonts', 'img'), gulp.parallel('css', 'js', 'polyfills', 'prismjs')));
215 264
 
216 265
 /**
217 266
  * Watches for changes
@@ -221,6 +270,7 @@ function watchwait() {
221 270
 	
222 271
 	gulp.watch('site/patterns/**/*.scss', gulp.series('css'));
223 272
 	gulp.watch('site/patterns/**/*.js', gulp.series('js'));
273
+	gulp.watch('site/patterns/*/polyfills.js', gulp.series('polyfills'));
224 274
 	gulp.watch('site/patterns/**/*.{woff,woff2,eot}', gulp.series('fonts'));
225 275
 	gulp.watch('site/patterns/**/*.{jpg,png,svg,ico}', gulp.series('img'));
226 276
 	
@@ -242,4 +292,4 @@ gulp.task('clean', function() {
242 292
 function prodclean() {
243 293
 	return del(['node_modules', 'gulpfile.js', 'site/patterns/*/', '!site/patterns/{shared,' + site + '}']);
244 294
 }
245
-gulp.task('prod', gulp.series('clean', gulp.parallel('fonts', 'img'), gulp.parallel('css.min', 'js.min', 'prismjs'), prodclean));
295
+gulp.task('prod', gulp.series('clean', gulp.parallel('fonts', 'img'), gulp.parallel('css.min', 'js.min', 'polyfills.min', 'prismjs'), prodclean));

+ 1
- 1
site/patterns

@@ -1 +1 @@
1
-Subproject commit a42ea124cc0094fdbaff1350b1dc0490a1924cf5
1
+Subproject commit 69b3f079ead4316d4cfbdf29a8c3d10dfa98bf61

+ 5
- 1
site/snippets/footer.php View File

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

Loading…
Cancel
Save