Adds option to import and build fonts into projects #81
Conversation
|
I thought about it over night and decided it probably makes no sense to even have a |
gulpfile.babel.js
Outdated
| @@ -29,7 +29,7 @@ function loadConfig() { | |||
|
|
|||
| // Build the "dist" folder by running all of the below tasks | |||
| gulp.task('build', | |||
| gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide)); | |||
| gulp.series(clean, gulp.parallel(pages, sass, fonts, javascript, images, copy), styleGuide)); | |||
There was a problem hiding this comment.
I'm not totally sure where in the pipeline is best for font fetching via gulp
Since this is an asset, you can put it between javascript and images, or after images ;)
gulpfile.babel.js
Outdated
| @@ -95,6 +95,10 @@ function sass() { | |||
| .pipe(browser.reload({ stream: true })); | |||
| } | |||
|
|
|||
| function fonts() { | |||
| return gulp.src('./bower_components/foundation-icon-fonts/**/*.{ttf,woff,woff2,eot,svg}').pipe(gulp.dest('dist/assets/fonts')); | |||
There was a problem hiding this comment.
Instead of hard-coding ./bower_components/foundation-icon-fonts in the Gulpfile, you can add the path in config.yml (as PATHS.fonts), but with the {ttf,woff,woff2,eot,svg} filter staying in the gulpfile.
Also, don't forget src/assets/fonts ;)
gulpfile.babel.js
Outdated
| @@ -153,6 +157,7 @@ function watch() { | |||
| gulp.watch('src/pages/**/*.html').on('all', gulp.series(pages, browser.reload)); | |||
| gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload)); | |||
| gulp.watch('src/assets/scss/**/*.scss').on('all', sass); | |||
| gulp.watch(['src/assets/scss/**/*{tff,woff,woff2,eot,svg}.']['fonts']); | |||
There was a problem hiding this comment.
You're watching scss there, but same remark as above: rely on PATH.fonts.
There was a problem hiding this comment.
Can you elaborate a bit on what you mean by PATH.fonts?
Thanks!
There was a problem hiding this comment.
Just saw your other comment. It was hidden thanks to a commit I made just a few minutes ago.
corrects paths and file specificity
|
@ncoden Thanks for the comments. I made those changes. One question I had though around these lines in # Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets/**/*"
- "!src/assets/{img,js,scss}{,/**/*}"Should fonts be added? EDIT: I see now, it's being mentioned here: // Copy files out of the assets folder
// This task skips over the "img", "js", and "scss" folders, which are parsed separately
function copy() {
return gulp.src(PATHS.assets)
.pipe(gulp.dest(PATHS.dist + '/assets'));
}So in this case, it probably makes sense to add in fonts since it has its own parser. Thoughts? :) |
|
Oups. I forgot that. I'm sorry about that. I should have review the PR more carefully. |
|
No worries! 👍 Didn't realize it was actually outputting those fonts. I think we should be fine not needing to make any changes actually, since the output appears to be identical. Thanks for taking the time to look this over! |
Hola! Not sure if this has been considered in the past, but I think this would be a worthwhile addition to the pipeline.
As someone who has used the ZURB template many times over the years, I think the one unintuitive aspect of the setup is the inability to quickly add fonts for custom branding. I have gotten around this in the past by leveraging CDNs, but this is taxing for performance given it creates extra HTTP requests (much safer to build it into the pipeline and serve it directly, in my opinion).
Also, in searching around for solutions to this, I've found a variety of options but one that stuck out was Larmor27's solution over on the foundation-icon-fonts repo, so I abstracted it and created a simple implementation for discussion here.
Quick thoughts:
@font-facedoesn't need to exist insrc/assets/scss/componentslike I have here. In fact, I would see it doable to have a separatescss/fonts/folder. I didn't do that here only because I could see a potential developer experience issue where folks throw actual font files into this folder despite the broader context being in thescssfolder._fonts.scssfile near the top ofapp.scssis the best option. I guess this would depend on how foundation-icon-fonts tends to be included based on tutorials and what not from the ZURB team.