Question

我正在使用gulp serve:dist来构建角度项目，但是当索引页面呈现时，它会为所有roboto字体提供404错误。见

搜索许多SO questions和github，但到目前为止它们都没有。这是我的文件夹结构和代码

/应用/

|-- 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"
    ]
}

这里是完整的gulp/build.js，相关的字体任务是

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

试验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/')));
});

和

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

这不起作用

试验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/')));
});

但是这会将font-awesome和glyphicon。{eot，svg，ttf，woff，woff2}文件添加到已经在 dist / fonts 文件夹中的serve / fonts /中

试验3

在主 app / bower.json

中添加

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

但仍无法正常工作

更新（工作）

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

上面工作正常但是我需要将前端复制到 / fonts / Roboto 文件夹中？

如果我没有在gulp.dest中添加 Roboto 文件夹而不是404错误，因为它在 fonts / Roboto 文件夹中查找字体？

将此 fonts / Roboto 文件夹名称更改为默认 / fonts 文件夹的位置？

Answer 1

这是我如何实现这一目标的。首先将版本更新为 roboto-fontface 0.7.0 并应用以下步骤

在 /app/bower.json

中添加

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

app / index.less

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

在html任务中添加以下行

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

添加新的gulp任务 copyfonts ，将Roboto字体复制到Roboto目录

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

按以下顺序添加这些任务

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

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

/bower_components/roboto-fontface/bower.json

更新（工作）

1 个答案: