gulp font task do not add roboto-fontface files into dist folder

Question

I am using gulp serve:dist to build the angular project but when index page render it gives 404 error for all roboto fonts. see

Search many SO questions and on github but none of them is working so far. Here are my folder structure and code

/app/

|-- bower_components
|-- bower.json
|-- dist
|-- gulp
|-- gulpfile.js
|-- karma.conf.js
|-- node_modules
|-- package.json
|-- README.md
|-- src

/bower_components/roboto-fontface/

.
|-- bower.json ( content of this file is written below )
|-- css
|   |-- mixins.less
|   |-- mixins.scss
|   |-- roboto
|   |   |-- less
|   |   |   |-- roboto-fontface-black-italic.less
|   |   |   |-- ....  ....
|   |   |   `-- roboto-fontface-thin.less
|   |   |-- roboto-fontface.css
|   |   `-- sass
|   |       |-- roboto-fontface-black-italic.scss
|   |       |-- .... ....
|   |       `-- roboto-fontface-thin.scss
|   `-- roboto-condensed
|       |-- less
|       |   |-- roboto-condensed-fontface-bold-italic.less
|       |   |-- .... ....
|       |   `-- roboto-condensed-fontface-regular.less
|       |-- roboto-condensed-fontface.css
|       `-- sass
|           |-- roboto-condensed-fontface-bold-italic.scss
|           |-- .... ....
|           `-- roboto-condensed-fontface.scss
|-- fonts
|   |-- roboto
|   |   |-- Roboto-Black{/.eot,/.svg,/.ttf,/.woff,/.woff2}
|   |   |-- Roboto-Regular{/.eot,/.svg,/.ttf,/.woff,/.woff2}
|   |   `-- Roboto-Thin{/.eot,/.svg,/.ttf,/.woff,/.woff2}
|   `-- roboto-condensed
|       |-- Roboto-Condensed-Bold{/.eot,/.svg,/.ttf,/.woff,/.woff2}
|       `-- Roboto-Condensed-Regular{/.eot,/.svg,/.ttf,/.woff,/.woff2}

/bower_components/roboto-fontface/bower.json

{
    "name": "roboto-fontface",
    "description": "A simple package providing the Roboto fontface.",
    "version": "0.5.0",
    "main": [
        "./css/roboto/roboto-fontface.css",
        "./css/roboto-condensed/roboto-condensed-fontface.css",
        "./fonts/roboto/*.*",
        "./fonts/roboto-condensed/*.*"
    ],
    "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    ]
}

here is complete gulp/build.js and relevant font task is

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

trial 1

gulp.task('copyfonts', function() {
   return gulp.src('../bower_components/roboto-fontface/fonts/**/*.{eot,svg,ttf,woff,woff2}')
   .pipe(gulp.dest(path.join(conf.paths.tmp, '/serve/fonts/')));
});

and

gulp.task('build', ['html', 'fonts', 'copyfonts', 'other']);

this does not work

trial 2

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

but this will add font-awesome and glyphicon .{eot,svg,ttf,woff,woff2} files into serve/fonts/ which are already in dist/fonts folder

trial 3

added in main app/bower.json

"roboto-fontface": {
      "main": [
        "css/roboto-condensed/less/roboto-condensed-fontface.less"
      ]
    },

but still not working

UPDATE (working)

// copy Roboto fonts into Roboto Directory
gulp.task('copyfonts', function() {
  return gulp.src($.mainBowerFiles().concat('bower_components/roboto-fontface/fonts/roboto/*'))
    .pipe($.filter('{Roboto-Black,Roboto-Bold,Roboto-Medium,Roboto-Regular}.{eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/Roboto')));
});

Above is working fine but here I need to copy fronts into /fonts/Roboto folder?

If I do not add Roboto folder in gulp.dest than 404 error comes as it is looking fonts in fonts/Roboto folder?

where to change this fonts/Roboto folder name to to default /fonts folder?

xkeshav · Answer 1 · 2017-03-03T04:11:59.470

Here how I did to achieve this. first update the version to roboto-fontface 0.7.0 and apply below steps

added in /app/bower.json

"overrides": {
   "roboto-fontface": {
      "main": [
          "css/roboto/less/roboto-fontface.less"
      ]
   }
}

in app/index.less

@import "../../bower_components/roboto-fontface/css/roboto/less/roboto-fontface.less";
@roboto-font-path: "../../bower_components/roboto-fontface/fonts";

add below line in html task here

.pipe($.replace('../../bower_components/roboto-fontface/fonts/', '../fonts/'))
.pipe($.replace('../../bower_components/fontawesome/fonts/', '../fonts/'))

add a new gulp task copyfonts which will copy Roboto fonts into Roboto Directory

gulp.task('copyfonts', function() {
return gulp.src($.mainBowerFiles().concat('bower_components/roboto-fontface/fonts/Roboto/*'))
.pipe($.filter('{Roboto-Thin,Roboto-Medium,Roboto-Bold,Roboto-Regular}.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/Roboto/')));
 });

add these task in below order

gulp.task('war', ['html', 'fonts', 'copyfonts', 'other'], function () {

gulp font task do not add roboto-fontface files into dist folder

/bower_components/roboto-fontface/bower.json

UPDATE (working)

1 Answers1