fonts task doesn't copy font files

[70853n]

Hi, I'm using gulp-angular with bootstrap-sass and noticed that there's no /dist/fonts/ directory after the build task finished. Well, bootstrap-sass-official doesn't declare the font files within the main property, so I added them manually (uugh :/). But there was still no /dist/fonts/.

It seems that return gulp.src($.mainBowerFiles()) .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}')) .pipe($.flatten()) .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/'))); doesn't filter correctly. Modifying the code to return gulp.src($.mainBowerFiles('**/*.{eot,svg,ttf,woff,woff2}')) .pipe($.flatten()) .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/'))); works perfectly fine. So why use $.filter instead of the native filter option of main-bower-files?

Anyway... because manually writing to the bower.json is bull**** and since it makes sense that fonts are not declared in the main property, the gulp task 'fonts' should not rely on the bower-main-files, should it? Isn't there a way to scan /bower_components for **/fonts/*.{eot,svg,ttf,woff,woff2}?

I'm not experienced with gulp and I'm certainly not a great programmer, so I'd be happy if some captain could fly by and help out :)

[mkalpana]

I ran into the same issue. The bootstrap-sass-official and fontawesome fonts weren't copied over to /dist/fonts/. Both, bootstrap-sass-official and fontawesome don't declare the font files in the main property of their bower.json so $.mainBowerFiles() doesn't work.

As a workaround, I had to modify the gulp/build.js font task to as follows:

gulp.task('fonts', function () {
  return gulp.src('./bower_components/**/*.{eot,svg,ttf,woff,woff2}')
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});

It worked for me. Instead of $.mainBowerFIles() use the path for the bower_components directly and you can get past modifying the bower.json manually.

[Swiip]

It's all about the bower.json from your dependency. Look at https://github.com/Swiip/generator-gulp-angular/blob/master/docs/user-guide.md#bower-dependencies

[poliveira89]

@mkalpana the way you are doing it will copy bootstrap font files 2 times, because they have the files duplicated on fonts/ and on dist.

I have this way:

return gulp.src(['./bower_components/bootstrap/fonts/*.{eot,svg,ttf,woff,woff2}', './bower_components/font-awesome/fonts/*.{eot,svg,ttf,woff,woff2}'])
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));

But does not work when I do gulp serve but works with gulp serve:dist :/ At this moment, I know that I must look into, BrowserSync options... if I have any update, I will edit this comment...

[poliveira89]

My problem with the development version served by gulp serve it's because is not overlaying variables.

On index.less I have: @fa-font-path: '../../bower_components/font-awesome/fonts/'; And the original variables.less from FontAwesome there is: @fa-font-path: "../fonts"; After styles gulp task being executed the generated CSS contains the wrong path:

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

I have made a test with LESS, and the problem it's LESS. Did not overlay variables. I created two files file1.less and file2.less.

// file1.less
@var1: #000000;

.stuff {
    background-color: @var1;
}

// file2.less
@var1: #c1c2c3;

@import "file1.less";

The compiled CSS file:

.stuff {
  background-color: #000000;
}

So, being a problem with LESS maybe I will check in their issues. Just thought would be nice to share what I found. :smile:

[claboran]

After some time I checked my problem a couple weeks ago with missing fonts for font-awesome. The only way to overcome the issue is still copy it over to 'dist' with an own gulp-task, what is not nice.

// fix to hard copy fonts from font-awesome as they don't include their fonts in their bower.json file
gulp.task('copy-fa-fonts', function(){
  return gulp.src(conf.wiredep.directory+'/font-awesome/fonts/*.{eot,svg,ttf,woff,woff2}')
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});
// and replace the bower path at the html pipeline

.pipe($.replace('../../bower_components/font-awesome/fonts/', '../fonts/'))  

it is working now for serve AND serve:dist

[cousine]

I had the same issue this morning, although font-awesome loads perfectly, however, for some reason bootstrap glyphicons weren't being copied in dist, and some fonts didnt resolve in serve not sure why!

Here is my solution:

First I changed the fonts task in build.js to concat bootstrap's fonts directory in bower, next I added a task specifically for serve, to copy the fonts into the .tmp directory:

// Only applies for fonts from bower dependencies
// Custom fonts are handled by the "other" task
gulp.task('fonts', function () {
  return gulp.src($.mainBowerFiles().concat('bower_components/bootstrap/fonts/*'))
    .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});

gulp.task('fonts-serve', function () {
  return gulp.src($.mainBowerFiles().concat('bower_components/bootstrap/fonts/*'))
    .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/fonts/')));
});

Finally, I added the new task to the watch task so it runs with serve:

gulp.task('watch', ['markups', 'inject', 'fonts-serve'], function () {
  ...
}

Hope this helps anyone else stuck with this issue.

[anaumov]

Thanks @cousine! Your solutions works for me.

[msgilligan]

I used a modified version of @cousine 's solution. I left the existing 'fonts' task, because I added the fonts to the overrides section of bower.json. And I added the following to build.js:

gulp.task('fonts-serve', function () {
  return gulp.src($.mainBowerFiles())
    .pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/fonts/')));
});

I also added 'fonts-serve' to the dependency list on the watch task.

It seems like something very similar to these changes should be added to the generator code. It seems like a bug that fonts are copied to /dist but not served via gulp serve.

[stefanaerts]

Problem with gulp taks fonts.

When you use clean-fonts in the fonts task and you run the fonts task twice,it will fail 1 time. This is the error message:

see picture below If you run them separate , so first gulp task clean-fonts and then fonts,it works always.

It seems there is some problem with the creation of the 4.4.0 subdirectory data in the pipeline.

When you put a wait before the copy it works for me, you can put a wait of 50 instead of 1500,but with 1500 you see the directories disappear and re-appear in visual studio code.

I think the bug is that the copy starts for the fonts in the directory and subdirectories while the deletion and creation of the subdirectories is still not done yet.

gulp.task('fonts', ['clean-fonts'], function () {

log('Copying fonts');

return gulp .src(config.root + config.fonts) .pipe($.wait(1500)) .pipe(gulp.dest(config.build + 'fonts/')); });

[stefanaerts]

dont forget to install gulp-wait

[bdizha]

gulp.task('fonts', function () { return gulp.src([ BOWER_PATH + '//fonts/' ]) .pipe(flatten()) .pipe(gulp.dest(BUILD_PATH + '/fonts')); });

[smakosh]

So here's a temporary solution that seems to work only while building by running gulp build

gulp.task('fonts', () => {
  return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
    .concat('app/fonts/**/*'))
    .pipe(gulp.dest('dist/fonts'));
});

& here's another temporary solution that copies the fonts on both serving or building

gulp.task('fonts', () => {
  return gulp.src(require('main-bower-files')('**/*.{eot,svg,ttf,woff,woff2}', function (err) {})
    .concat('app/fonts/**/*'))
    .pipe($.if(dev, gulp.dest('.tmp/fonts')))
    .pipe(gulp.dest('dist/fonts'));
});