将 angular-ui-grid 字体复制到 .tmp/fonts

Question

我遇到了knownissue 和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;
}

这解决了生产中的问题，但现在在开发中，我在浏览器控制台中收到这些错误：

获取http://localhost:9000/fonts/ui-grid.woff

获取http://localhost:9000/fonts/ui-grid.ttf? 404（未找到）

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

Answer 1

我想出了一个可行的解决方案，尽管它不是很干燥。我希望其他人提出更好的解决方案。

  // 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 任务，并将它作为一个部门添加到我的serve 任务中。