使用 Angular + Gulp + Browserify 时字形图标不显示答案

【问题标题】：Glyphicons dont show when using Angular + Gulp + Browserify使用 Angular + Gulp + Browserify 时字形图标不显示
【发布时间】：2016-05-11 14:27:43
【问题描述】：

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

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

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

如果需要，我可以发布更多代码。请问一下。感谢您的阅读。

相对代码。我的 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

【问题讨论】：

你看过这个github.com/webpack/webpack/issues/1468 与 webpack 配置有关吗？
@codemonkey 我看过那个讨论。除了我的 scss 文件中提供的路径之外，我没有任何用于搜索字体文件的配置。生病查看 browserify 配置，看看是否有我可以添加的东西。谢谢。
我猜我可以在 browserify 任务中添加一些配置来强制使用绝对 URL。我会在那里再挖一些。

标签： angularjs gulp angular-ui-bootstrap browserify glyphicons

【解决方案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/";

现在一切似乎都正常了。不知道我也需要捆绑字体。如果有更好的方法可以做到这一点，我会全力以赴。

【讨论】：

【解决方案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 引用的图标和图形，因此如果您不想要这些，则需要进行进一步的过滤。希望这至少可以帮助某人启动他们的大脑。

【讨论】：