棱角分明的UI格字体复制到的.tmp /字体 [英] Copy angular-ui-grid fonts into .tmp/fonts

问题描述

我遇到了称为的问题，提供的角UI电网在那里我的一些字体看起来韩国生产。

我申请一定的修复下面的CSS：

  @字体面{
  FONT-FAMILY：'UI网;
  SRC：URL（'../字体/ UI-grid.eot'）;
  SRC：URL（'../字体/ UI-grid.eot＃iefix'）格式（嵌入式OpenType字体），网址（'../字体/ UI-grid.woff'）格式（WOFF）， URL（'../字体/ UI-grid.ttf？'）格式（TrueType字体），网址（'../字体/ UI-grid.svg＃UI网？'）格式（'SVG'）;
  字体重量：正常;
  字体风格：正常;
}
 

本固定生产中的问题，但现在在发展中，我得到这些错误在浏览器控制台：

  

的http：//本地主机：9000 /字体/ UI-grid.woff

  
  

的http：//本地主机：9000 /字体/ UI-grid.ttf ？ 404（未找到）

我用咕嘟咕嘟作为我的构建工具。我可以得到这些错误中加入字体目录的.tmp /服务和手动复制<$ C走开$ C> bower_components /角度的UI网/ UI网。* 在那里，但是这当然是不能接受的长久之计。

我咕嘟咕嘟配置已经复制了我的字体文件在生产公共/字体。如何能够做到在开发类似的东西？

下面是我的一饮而尽/ build.js 。我是一个新手咕嘟咕嘟

 使用严格的;VAR一饮而尽=要求（'吞掉'）;变量$ =要求（'一饮而尽负载-插件）（{
  模式：['gulp- *'，'主凉亭档案，丑化保存许可'，'德尔']
}）;module.exports =功能（选件）{
  gulp.task（'谐音'，['加价']，函数（）{
    返回gulp.src（[
      options.src +'/{app,components}/**/*.html'，
      options.tmp +'/serve/{app,components}/**/*.html
    ]）
      .pipe（$。minifyHtml（{
        空：真，
        饶：真实，
        报价：真
      }））
      .pipe（$。angularTemplatecache（'templateCacheHtml.js'，{
        模块：'freightVerify
      }））
      .pipe（gulp.dest（options.tmp +'/谐音/'））;
  }）;  gulp.task（'HTML'，['注入'，'谐音']，函数（）{
    VAR partialsInjectFile = gulp.src（options.tmp +'/partials/templateCacheHtml.js'，{阅读：假}）;
    VAR partialsInjectOptions = {
      STARTTAG：'＆LT;  - 注射：谐音 - ＆GT;，
      ignorePath：options.tmp +'/谐音'，
      addRootSlash：假的
    };    VAR htmlFilter = $ .filter（'。*的html'）;
    VAR jsFilter = $ .filter（'** / * JS。'）;
    VAR cssFilter = $ .filter（'** / * CSS。'）;
    VAR资产;    返回gulp.src（options.tmp +'/serve/*.html'）
      .pipe（$。注（partialsInjectFile，partialsInjectOptions））
      .pipe（资产= $ .useref.assets（））
      .pipe（$。REV（））
      .pipe（jsFilter）
      .pipe（$。ngAnnotate（））
      .pipe（$丑化（{preserveComments：$ .uglifySaveLicense}））。在（'错误'，options.errorHandler（'丑化'））
      .pipe（jsFilter.restore（））
      .pipe（cssFilter）
      .pipe（$。替换（../../ bower_components /引导-萨斯官方/资产/字体/引导/'，'../fonts/'））
      .pipe（$。CSSO（））
      .pipe（cssFilter.restore（））
      .pipe（assets.restore（））
      .pipe（$。useref（））
      .pipe（$。revReplace（））
      .pipe（htmlFilter）
      .pipe（$。minifyHtml（{
        空：真，
        饶：真实，
        报价：真实，
        条件句：真
      }））
      .pipe（htmlFilter.restore（））
      .pipe（gulp.dest（options.dist +'/'））
      .pipe（$大小（{标题：options.dist +'/'，showFiles：真}））;
  }）;  //仅适用于从亭子依赖字体
  //自定义字体是由其他​​任务处理
  gulp.task（'字型'，函数（）{
    返回gulp.src（$。mainBowerFiles（））
      .pipe（$。过滤器（'** / *。{EOT，SVG，TTF，WOFF，woff2}'））
      .pipe（$。压扁（））
      .pipe（gulp.dest（options.dist +'/字体/'））;
  }）;  gulp.task（其他，函数（）{
    返回gulp.src（[
      options.src +/ ** / *'，
      ！ + options.src +'/**/*.{html,css,js,scss,jade}
    ]）
      .pipe（gulp.dest（options.dist +'/'））;
  }）;  gulp.task（'干净'，函数（完成）{
    $ .DEL（[options.dist +'/'，options.tmp +'/']，完成）;
  }）;  gulp.task（'配置'，函数（）{
    gulp.src（options.src +'/app/config/config.json'）
      .pipe（$。ngConfig（'freightVerify'，{
        包装：'（函数（）{\\ n \\'使用严格的\\'，\\ n / * jshint忽略：开始* / \\ n返回＆lt;％=模块％＆GT; / * jshint忽略：结束* / \\ n}） （）;，
        createModule：假的，
        环境：process.env.NODE_ENV || 发展
      }））
      .pipe（gulp.dest（options.src +'/应用程序/配置'））;
  }）;  gulp.task（'打造'，['配置'，'HTML'，'字体'，'其他']）;
};
 

和这里的 gulpfile 本身，如果它可以帮助：

 使用严格的;VAR一饮而尽=要求（'吞掉'）;
VAR gutil =要求（'一饮而尽-UTIL'）;
VAR _ =要求（'lodash'）;
VAR扳手=要求（'扳手'）;VAR的选择= {
  SRC：'src'中，
  DIST：../public'，
  TMP：.TMP，
  E2E：'端到端'，
  的ErrorHandler：功能（标题）{
    复位功能（ERR）{
      gutil.log（gutil.colors.red（[+标题+]），err.toString（））;
      this.emit（结束）;
    };
  }
};wrench.readdirSyncRecursive（'./一饮而尽'）。过滤器（功能（文​​件）{
  回报（/\\.(js|co​​ffee)$/i).test(file）;
}）地图（功能（文​​件）{
  要求（'./一饮而尽/+文件）（选件）;
}）;gulp.task（'默认'，['干净']，函数（）{
  gulp.start（'构建'）;
}）;gulp.task（'的Heroku：生产功能（）{
  gulp.start（'构建'）;
}）
 

解决方案

我来了，而这样的作品，虽然它不是很干的解决方案。我希望别人提出一个更好的解决方案。

  //这是原始字体任务
  gulp.task（'字型'，函数（）{
    返回gulp.src（$。mainBowerFiles（））
      .pipe（$。过滤器（'** / *。{EOT，SVG，TTF，WOFF，woff2}'））
      .pipe（$。压扁（））
      .pipe（gulp.dest（options.dist +'/字体/'））;
  }）;  //这是我的新任务，只是略有不同
  gulp.task（'字体：开发'，函数（）{
    返回gulp.src（$。mainBowerFiles（））
      .pipe（$。过滤器（'** / *。{EOT，SVG，TTF，WOFF，woff2}'））
      .pipe（$。压扁（））
      .pipe（gulp.dest（options.tmp +'/服务/字体/'））;
  }）;
 

我添加了字体：开发任务，如上图所示，我加入​​它作为一个出发到我的服务任务。

I was experiencing a known issue with Angular UI Grid where some of my fonts would look Korean in production.

I applied a certain fix by adding the following CSS:

@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;
}

This fixed the problem in production, but now in development I get these errors in the browser console:

GET http://localhost:9000/fonts/ui-grid.woff

GET http://localhost:9000/fonts/ui-grid.ttf? 404 (Not Found)

I'm using Gulp as my build tool. I can get the errors to go away by adding a fonts directory to .tmp/serve and manually copying bower_components/angular-ui-grid/ui-grid.* there, but this of course isn't an acceptable permanent solution.

My Gulp configuration already copies my font files to public/fonts in production. How can I achieve something similar in development?

Here's my gulp/build.js. I'm a Gulp novice.

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

And here's the gulpfile itself, if it helps:

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

解决方案

I came up while a solution that works, although it's not very DRY. I hope someone else suggests a better solution.

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

I added the fonts:dev task as shown above, and I added it as a dep to my serve task.

这篇关于棱角分明的UI格字体复制到的.tmp /字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！