使用 Angular + Gulp + Browserify 时不显示字形
Glyphicons dont show when using Angular + Gulp + Browserify
我在让 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
肯定与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/";
现在似乎一切正常。不知道我也需要捆绑字体。如果有更好的方法,我洗耳恭听。
我刚查过同样的问题。我最终将 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 引用的图标和图形,因此如果您不想要这些,则需要进行进一步过滤。希望这至少可以帮助人们动脑筋。
我在让 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
肯定与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/";
现在似乎一切正常。不知道我也需要捆绑字体。如果有更好的方法,我洗耳恭听。
我刚查过同样的问题。我最终将 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 引用的图标和图形,因此如果您不想要这些,则需要进行进一步过滤。希望这至少可以帮助人们动脑筋。