14.
Publish Fonts to web
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
Whoops, an error! Please, try again later.
10 Comments
Hi, thank you for great tutorial!!! I am having some issues... With bower I installed bootstrap and font-awesome but after running gulp and open page in browser I get Failed to parse SourceMap in console. What I am doing wrong? Tnx!
Hi Gasper!
Hmm, interesting! When you run gulp, do you see files that end in .map in your web/js and web/css directories? Your browser knows to load these - e.g. for site.js, it will look for site.js.map. So, either these map files are missing (in this case, you should also see a 404 in your browser network tools) or they are corrupt in some way.
Let me know what you find out!
I just found out I have to delete old *.js.map and *.css.map files when running gulp and than gulp --production. Now it works fine. Tnx!
Hi Ryan, thanks for the great tutorial !
I was wondering if you have a best practise for css url rewriting. I have found gulp plugins but I am running into issues at the moment.
Hi Nicolas!
My approach is basically to avoid this :). What I mean is - like in this chapter - if bootstrap is looking for fonts in ../fonts, I just publish them there, relative to where the bootstrap CSS is published (of course, in bootstrap, there is another solution by changing less/sass variables to control the fonts directory). And the same goes for my code - I'm purposefully trying to *not* change the directory organization when I publish things into web so that I can avoid needing to rewrite.
But, I have played with this a little, and for me, I think if you *do* run into this problem and can't avoid it, I like something like gulp-replace to modify the URLs. It's not automatic or fancy, but it's very easy to understand in those cases where you need it. I haven't used a replace method extensively, but that's what I like ... other than avoiding the problem altogether ;)
Cheers!
I agree, if the path makes sense, a good option is to publish the assets accordingly. In some cases, I prefer to change it tho. Thanks for pointing to gulp-replace, it worked perfectly !
The copy function doesn't work with folders.
I'm using flag icon and this wsn't working.
app.copy(config.bowerDir+'/flag-icon-css/flags/*', config.assetDir+'/flags');
I had to use
app.copy(config.bowerDir+'/flag-icon-css/flags/1x1/*', config.assetDir+'/flags/1x1');
app.copy(config.bowerDir+'/flag-icon-css/flags/4x3/*', config.assetDir+'/flags/4x3');
It's ok in this case as there is only 2 folders.
just to mention.
Hi there!
Hmm, does it work if you copy /flags/**? Often, the ** is used to be recursive.
Either way, thanks for the note!
yep the /** does work ! Thank you.
That's awesome! Thanks for the great comment/question!
"Houston: no signs of life"
Start the conversation!