javascript - 如何使用 gulp-usemin 包字体

Question

我目前正在使用 gulp-usemin插件，但是我正在努力解决一件事:使用包提供的图像!

  <!-- build:css lib/css/main.min.css -->
  <link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.css">
  <!-- endbuild -->

font-awesome bower 包还附带字体:

bower_components/font-awesome/fonts/**.*

我目前使用 usemin 插件编译我的 css:

gulp.task('usemin', function() {
    return gulp.src('src/index.html')
        .pipe(usemin({
            css: [minifyCss(), 'concat'],
        }))
        .pipe(gulp.dest('dist/'));
});

现在这会使用上述构建路径扫描我的 HTML，并成功缩小它。

但是我遇到的问题是，现在我的超赞字体 CSS 正在错误的位置查找字体，因为它们不再位于同一目录中。

我该如何解决这个问题？

Answer 1

通过找到这个问题解决了这个问题:Can you remove a folder structure when copying files in gulp?

我的任务现在使用 gulp-rename:

gulp.task('copy-bower_fonts', function() {
    return gulp.src(paths.bower_fonts)
        .pipe(rename({
            dirname: '/fonts'
        }))
        .pipe(gulp.dest('dist/lib'));
});

查找 ../fonts/ 的包中的字体现在指向正确的位置。