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([ BOWERPATH + '//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'));
});