gulp字体任务不将roboto-fontface文件添加到dist文件夹中

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?

Answer 1

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

1. added in /app/bower.json

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

2. in app/index.less

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

3. add below line in html task here

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

4. 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/'))); }); 

5. add these task in below order

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