diff --git a/README.md b/README.md index ed99404..998531f 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ Workflow: - Image optimization - SVG icon sprites - Favicon generation +- Font subsetting - Bourbon / Bitters / Neat - ... @@ -90,6 +91,18 @@ location /assets { } ``` +### Self-hosting fonts +If you already have font files (or at least one), that's great. Otherwise, there's FontSquirrel's [webfont generator](http://www.fontsquirrel.com/tools/webfont-generator) (including subsetting, file conversion, CSS generation and much more). + +If Google Fonts are what you want, then [this](https://github.com/majodev/google-webfonts-helper) might be helpful. + +After learning about [webfont strategies](https://www.zachleat.com/web/comprehensive-webfonts), you might want to subset your fonts, but rather than doing it manually (uploading, configuring, downloading, ..), let the machine handle it for you: This boilerplate supports font subsetting via [`glyphhanger`](https://github.com/filamentgroup/glyphhanger) when building for production. In order to use this feature, you have to install [`pyftsubset`](https://github.com/fonttools/fonttools) via [pip](https://pypi.org/project/pip) first: + +```text +pip install fonttools +``` + + **Note: Before publishing your project, be sure to check your `.gitignore` file!** ## Special Thanks diff --git a/config.js b/config.js index 0d15f41..e1e3ce3 100644 --- a/config.js +++ b/config.js @@ -127,4 +127,23 @@ module.exports = { }, }, }, + subsetting: { + // For more options, see https://github.com/filamentgroup/glyphhanger + enable: true, + urls: [ + // In combination with `spider: true`, this should be sufficient: + localURL, // Browsersync source + // Otherwise, add as many local/external files & URLs as you like: + // pkg.homepage, + // 'http://example.com', + // './example.html' + ], + formats: ['woff'], // Available formats: 'ttf', 'woff', 'woff-zopfli', 'woff2' + spider: false, + whitelist: false, + us_ascii: false, + latin: false, + output_css: true, + css_selector: false, + }, }; diff --git a/package.json b/package.json index 3c52844..63e503b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gulp-kirby-starter-kit", - "version": "2.0.0", + "version": "2.0.0-beta.2", "description": "Getting started with Gulp v4 & Kirby v3 in no-time", "author": "S1SYPHOS ", "homepage": "https://github.com/S1SYPHOS/Gulp-Kirby-Starter-Kit#readme", @@ -24,9 +24,11 @@ "@babel/core": "^7.3.4", "@babel/preset-env": "^7.3.4", "browser-sync": "^2.26.3", + "child_process": "^1.0.2", "del": "^4.0.0", "eslint": "^5.15.2", "eslint-config-google": "^0.12.0", + "glyphhanger": "^3.2.0", "gulp": "^4.0.0", "gulp-autoprefixer": "^6.0.0", "gulp-babel": "^8.0.0", @@ -35,6 +37,7 @@ "gulp-eslint": "^5.0.0", "gulp-favicons": "^2.3.0", "gulp-filter": "^5.1.0", + "gulp-flatten": "^0.4.0", "gulp-if": "^2.0.2", "gulp-imagemin": "^5.0.3", "gulp-newer": "^1.4.0", diff --git a/source/fonts/subset/.gitkeep b/source/fonts/subset/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/tasks/fonts.js b/tasks/fonts.js index b050fb5..d5c0840 100644 --- a/tasks/fonts.js +++ b/tasks/fonts.js @@ -5,10 +5,16 @@ Assets - Fonts */ const - {src, dest, lastRun} = require('gulp'), + {src, dest, series, parallel, lastRun} = require('gulp'), conf = require('../config'), - browserSync = require('browser-sync').init + subsetSrc = conf.src.fonts + '/subset', + subsetDist = conf.dist.fonts + '/subset', + + browserSync = require('browser-sync').init, + del = require('del'), + {execSync} = require('child_process'), + flatten = require('gulp-flatten') ; @@ -17,15 +23,75 @@ const */ function copyFonts() { - return src(conf.src.fonts + '/**/*', {since: lastRun(copyFonts)}) + const filetypes = conf.fonts.allowed.join(','); + const fontSource = [ + conf.src.fonts + '/**/*.{' + filetypes + '}', + '!' + subsetSrc + '/**/*', + ]; + + return src(fontSource, {since: lastRun(copyFonts)}) + .pipe(flatten()) .pipe(dest(conf.dist.fonts)) .pipe(browserSync.stream()) ; } +/* + * Subsets fonts for smaller filesize + */ + +function subsetFonts(cb) { + const option = conf.subsetting; + const command = [ + './node_modules/.bin/glyphhanger ', + '--subset=' + subsetSrc + '/*.ttf', + option.urls.join(' '), + option.formats ? '--formats=' + option.formats.join(',') : '', + option.spider ? '--spider' : '', + option.whitelist ? '--whitelist=' + option.whitelist : '', + option.latin ? '--LATIN' : '', + option.us_ascii ? '--US_ASCII' : '', + option.output_css ? '--css' : '', + option.css_selector ? '--cssSelector="' + option.css_selector + '"' : '', + '--output=' + subsetDist, + '> ' + subsetSrc + '/result.log', + ]; + + execSync('mkdir -p ' + subsetDist); + execSync(command.filter(Boolean).join(' ')); + cb(); +} + + +/* + * Copies generated font styles to CSS directory + */ + +function copyStyles() { + return src(subsetDist + '/*.css') + .pipe(dest(conf.dist.styles)); +} + + +/* + * Removes CSS files from fonts folder + */ + +function removeCSS() { + return del(subsetDist + '/*.css'); +} + + /* * Exports */ -exports.fonts = copyFonts; +if (conf.fonts.subsetting.enable && process.env.NODE_ENV === 'production') { + exports.fonts = parallel( + copyFonts, + series(subsetFonts, copyStyles, removeCSS) + ); +} else { + exports.fonts = copyFonts; +}