将angular-ui-grid字体复制到.tmp/fonts
Copy angular-ui-grid fonts into .tmp/fonts
我遇到了 known issue with Angular UI Grid 我的一些字体在生产中看起来像韩语的情况。
我通过添加以下 CSS 来应用 a certain fix:
@font-face {
font-family: 'ui-grid';
src: url('../fonts/ui-grid.eot');
src: url('../fonts/ui-grid.eot#iefix') format('embedded-opentype'), url('../fonts/ui-grid.woff') format('woff'), url('../fonts/ui-grid.ttf?') format('truetype'), url('../fonts/ui-grid.svg?#ui-grid') format('svg');
font-weight: normal;
font-style: normal;
}
这解决了生产中的问题,但现在在开发中我在浏览器控制台中收到以下错误:
GET http://localhost:9000/fonts/ui-grid.woff
GET http://localhost:9000/fonts/ui-grid.ttf? 404 (Not Found)
我正在使用 Gulp 作为我的构建工具。我可以通过将 fonts
目录添加到 .tmp/serve
并在那里手动复制 bower_components/angular-ui-grid/ui-grid.*
来消除错误,但这当然不是一个可接受的永久解决方案。
我的 Gulp 配置已经将我的字体文件复制到生产中的 public/fonts
。我怎样才能在开发中实现类似的东西?
这是我的 gulp/build.js
。我是Gulp新手。
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});
module.exports = function(options) {
gulp.task('partials', ['markups'], function () {
return gulp.src([
options.src + '/{app,components}/**/*.html',
options.tmp + '/serve/{app,components}/**/*.html'
])
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe($.angularTemplatecache('templateCacheHtml.js', {
module: 'freightVerify'
}))
.pipe(gulp.dest(options.tmp + '/partials/'));
});
gulp.task('html', ['inject', 'partials'], function () {
var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', { read: false });
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: options.tmp + '/partials',
addRootSlash: false
};
var htmlFilter = $.filter('*.html');
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
var assets;
return gulp.src(options.tmp + '/serve/*.html')
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe(assets = $.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', options.errorHandler('Uglify'))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.replace('../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true,
conditionals: true
}))
.pipe(htmlFilter.restore())
.pipe(gulp.dest(options.dist + '/'))
.pipe($.size({ title: options.dist + '/', showFiles: true }));
});
// Only applies for fonts from bower dependencies
// Custom fonts are handled by the "other" task
gulp.task('fonts', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.dist + '/fonts/'));
});
gulp.task('other', function () {
return gulp.src([
options.src + '/**/*',
'!' + options.src + '/**/*.{html,css,js,scss,jade}'
])
.pipe(gulp.dest(options.dist + '/'));
});
gulp.task('clean', function (done) {
$.del([options.dist + '/', options.tmp + '/'], done);
});
gulp.task('config', function() {
gulp.src(options.src + '/app/config/config.json')
.pipe($.ngConfig('freightVerify', {
wrap: '(function () {\n\'use strict\';\n/*jshint ignore:start*/\n return <%= module %> /*jshint ignore:end*/\n})();',
createModule: false,
environment: process.env.NODE_ENV || 'development'
}))
.pipe(gulp.dest(options.src + '/app/config'));
});
gulp.task('build', ['config', 'html', 'fonts', 'other']);
};
这里是 gulpfile
本身,如果有帮助的话:
'use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');
var _ = require('lodash');
var wrench = require('wrench');
var options = {
src: 'src',
dist: '../public',
tmp: '.tmp',
e2e: 'e2e',
errorHandler: function(title) {
return function(err) {
gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
this.emit('end');
};
}
};
wrench.readdirSyncRecursive('./gulp').filter(function(file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
require('./gulp/' + file)(options);
});
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
gulp.task('heroku:production', function() {
gulp.start('build');
})
我想出了一个可行的解决方案,尽管它不是很干。我希望其他人提出更好的解决方案。
// This is the original fonts task
gulp.task('fonts', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.dist + '/fonts/'));
});
// This is my new task, only slightly different
gulp.task('fonts:dev', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.tmp + '/serve/fonts/'));
});
我如上所示添加了 fonts:dev
任务,并将其作为 dep 添加到我的 serve
任务中。
我遇到了 known issue with Angular UI Grid 我的一些字体在生产中看起来像韩语的情况。
我通过添加以下 CSS 来应用 a certain fix:
@font-face {
font-family: 'ui-grid';
src: url('../fonts/ui-grid.eot');
src: url('../fonts/ui-grid.eot#iefix') format('embedded-opentype'), url('../fonts/ui-grid.woff') format('woff'), url('../fonts/ui-grid.ttf?') format('truetype'), url('../fonts/ui-grid.svg?#ui-grid') format('svg');
font-weight: normal;
font-style: normal;
}
这解决了生产中的问题,但现在在开发中我在浏览器控制台中收到以下错误:
GET http://localhost:9000/fonts/ui-grid.woff
GET http://localhost:9000/fonts/ui-grid.ttf? 404 (Not Found)
我正在使用 Gulp 作为我的构建工具。我可以通过将 fonts
目录添加到 .tmp/serve
并在那里手动复制 bower_components/angular-ui-grid/ui-grid.*
来消除错误,但这当然不是一个可接受的永久解决方案。
我的 Gulp 配置已经将我的字体文件复制到生产中的 public/fonts
。我怎样才能在开发中实现类似的东西?
这是我的 gulp/build.js
。我是Gulp新手。
'use strict';
var gulp = require('gulp');
var $ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});
module.exports = function(options) {
gulp.task('partials', ['markups'], function () {
return gulp.src([
options.src + '/{app,components}/**/*.html',
options.tmp + '/serve/{app,components}/**/*.html'
])
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true
}))
.pipe($.angularTemplatecache('templateCacheHtml.js', {
module: 'freightVerify'
}))
.pipe(gulp.dest(options.tmp + '/partials/'));
});
gulp.task('html', ['inject', 'partials'], function () {
var partialsInjectFile = gulp.src(options.tmp + '/partials/templateCacheHtml.js', { read: false });
var partialsInjectOptions = {
starttag: '<!-- inject:partials -->',
ignorePath: options.tmp + '/partials',
addRootSlash: false
};
var htmlFilter = $.filter('*.html');
var jsFilter = $.filter('**/*.js');
var cssFilter = $.filter('**/*.css');
var assets;
return gulp.src(options.tmp + '/serve/*.html')
.pipe($.inject(partialsInjectFile, partialsInjectOptions))
.pipe(assets = $.useref.assets())
.pipe($.rev())
.pipe(jsFilter)
.pipe($.ngAnnotate())
.pipe($.uglify({ preserveComments: $.uglifySaveLicense })).on('error', options.errorHandler('Uglify'))
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.replace('../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/', '../fonts/'))
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe(htmlFilter)
.pipe($.minifyHtml({
empty: true,
spare: true,
quotes: true,
conditionals: true
}))
.pipe(htmlFilter.restore())
.pipe(gulp.dest(options.dist + '/'))
.pipe($.size({ title: options.dist + '/', showFiles: true }));
});
// Only applies for fonts from bower dependencies
// Custom fonts are handled by the "other" task
gulp.task('fonts', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.dist + '/fonts/'));
});
gulp.task('other', function () {
return gulp.src([
options.src + '/**/*',
'!' + options.src + '/**/*.{html,css,js,scss,jade}'
])
.pipe(gulp.dest(options.dist + '/'));
});
gulp.task('clean', function (done) {
$.del([options.dist + '/', options.tmp + '/'], done);
});
gulp.task('config', function() {
gulp.src(options.src + '/app/config/config.json')
.pipe($.ngConfig('freightVerify', {
wrap: '(function () {\n\'use strict\';\n/*jshint ignore:start*/\n return <%= module %> /*jshint ignore:end*/\n})();',
createModule: false,
environment: process.env.NODE_ENV || 'development'
}))
.pipe(gulp.dest(options.src + '/app/config'));
});
gulp.task('build', ['config', 'html', 'fonts', 'other']);
};
这里是 gulpfile
本身,如果有帮助的话:
'use strict';
var gulp = require('gulp');
var gutil = require('gulp-util');
var _ = require('lodash');
var wrench = require('wrench');
var options = {
src: 'src',
dist: '../public',
tmp: '.tmp',
e2e: 'e2e',
errorHandler: function(title) {
return function(err) {
gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
this.emit('end');
};
}
};
wrench.readdirSyncRecursive('./gulp').filter(function(file) {
return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
require('./gulp/' + file)(options);
});
gulp.task('default', ['clean'], function() {
gulp.start('build');
});
gulp.task('heroku:production', function() {
gulp.start('build');
})
我想出了一个可行的解决方案,尽管它不是很干。我希望其他人提出更好的解决方案。
// This is the original fonts task
gulp.task('fonts', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.dist + '/fonts/'));
});
// This is my new task, only slightly different
gulp.task('fonts:dev', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.tmp + '/serve/fonts/'));
});
我如上所示添加了 fonts:dev
任务,并将其作为 dep 添加到我的 serve
任务中。