使用 Angular + Gulp + Browserify 时不显示字形

Question

我在让 Glyphicon 图标出现在我的页面上时遇到了一些重大问题。我用谷歌搜索并尝试了其他人推荐的大部分内容，但似乎没有任何效果。只有一个灰色方块出现在图标应该出现的位置。它也发生在每个图标上。

我对 gulp 和 browserify 的工作原理有基本的了解，但我可能没有正确包含字体文件。网络流量显示正在加载的字体文件（下方 link 中的图片）。

一定有一些我遗漏的简单的东西，但我就是想不通。任何建议或帮助将不胜感激。试图让它发挥作用真是令人沮丧。

如果需要，我可以 post 更多代码。请只是问。感谢阅读。

相关代码。我的 package.json 文件

中只有依赖项

app.js

window.$ = window.jQuery = require('jquery');
var angular = require('angular');
var uibs = require('angular-ui-bootstrap');
var myApp = angular.module('myApp', [uibs]);

style.scss

$icon-font-path: "../../node_modules/bootstrap-sass/assets/fonts/bootstrap/";
@import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';

gulpfile.js（仅相对代码）

var gulp = require('gulp'),
    scss = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer')

gulp.task('styles', function () {
        return scss('scss/*.scss', {
            onError: function (e) {
                console.log(e);
            }
        })
            .pipe(autoprefixer("last 2 versions", "> 1%", "ie 8"))
            .pipe(gulp.dest('dist/css/'))
            .pipe(refresh(lrserver));
    });

// Browserify task
gulp.task('browserify', function () {
    // Single point of entry (make sure not to src ALL your files, browserify will figure it out for you)
    gulp.src(['app/app.js'])
        .pipe(browserify({
            insertGlobals: true,
            debug: true
        }))
        // Bundle to a single file
        .pipe(concat('bundle.js'))
        // Output it to our dist folder
        .pipe(gulp.dest('dist/js'));
});

@font-face 似乎已正确生成。此处的网址似乎是正确的。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot");
  src: url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../../node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }

我忘了补充一点，当它尝试加载图标时，它会在浏览器控制台中显示：

Failed to decode downloaded font: http://localhost:5000/node_modules/bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2
OTS parsing error: invalid version tag

Answer 1

肯定与style.scss文件中提供的路径有关。

我添加了一个新的gulp任务

// Copies fonts to /dist (for Bootstrap glyphicons)
gulp.task('fonts', function() {
    return gulp.src('./node_modules/bootstrap/fonts/*')
        .pipe(gulp.dest('./dist/fonts'))
});

这会将字体文件移动到我的 dist 文件夹中。然后，我将 style.scss 中的路径更改为

$icon-font-path: "../fonts/";

现在似乎一切正常。不知道我也需要捆绑字体。如果有更好的方法，我洗耳恭听。

Answer 2

我刚查过同样的问题。我最终将 css 中的字体与 datauri 捆绑在一起。这是我的构建步骤

return browserify("./app/filemanager.js")
    .transform({
        global: true,
        minify: true,
        processRelativeUrl: function(relativeUrl) {
            var DataUri = require("datauri");
            var dUri = new DataUri(relativeUrl.split("?")[0].split("#")[0]);
            return dUri.content;
        }}, require("browserify-css"))
    .bundle()
    .pipe(source("filemanager.js"))
    .pipe(gulp.dest("./dist"));

基本上，这是在获取每个亲戚 url 并对它进行编码并将其嵌入到 css 中。它还会嵌入您的 css 引用的图标和图形，因此如果您不想要这些，则需要进行进一步过滤。希望这至少可以帮助人们动脑筋。

使用 Angular + Gulp + Browserify 时不显示字形

Glyphicons dont show when using Angular + Gulp + Browserify

angularjs

gulp

angular-ui-bootstrap

browserify

glyphicons