Browse Source

Extract polyfills into a separate JS file

master
Lukas Bestle 1 year 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) {
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)
.pipe(concat('index.js'))
@@ -129,7 +132,39 @@ helpers.buildJS = function(site, minify) {
.pipe(uglify({output: {comments: 'some'}}))
.pipe(gulp.dest('assets/js'));
}

// Trigger LiveReload
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());
};
@@ -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));

+ 1
- 1
site/patterns

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

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

@@ -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>

Loading…
Cancel
Save