使用Gulp将所有bower包字体文件复制到build目录

Posted 2021-04-20

我正在使用以下Gulp任务从Font Awesome Bower包中复制所需的字体，这样可以正常工作并输出如下文件：

应用>构建>字体>字体文件

gulp.task('copyfonts', function() {
   gulp.src('./bower_components/components-font-awesome/fonts/**/*.{ttf,woff,eof,svg}')
   .pipe(gulp.dest('./fonts'));
});

我正在尝试重构此任务，以便使用**通配符从任何bower包（例如Bootstrap）移动字体。

gulp.task('copyfonts', function() {
   gulp.src('./bower_components/**/fonts/**/*.{ttf,woff,eof,svg}')
   .pipe(gulp.dest('./fonts'));
});

应用>构建>字体>

Bootstrap> Fonts> Font Files Font-Awesome> Fonts> Font Files

TL; DR

使用我的第二种方法是复制文件，如上所示，复制包文件夹并将其作为子项移动到'fonts'文件夹。任何人都可以帮我告诉我哪里出错了......

答案

我在这里参加派对有点晚了，但对于未来偶然发现这个问题的人：我相信你的字体中有一个拼写错误：eof应该是eot。

gulp.src('./bower_components/**/fonts/**/*.{ttf,woff,eof,svg}')

应该

gulp.src('./bower_components/**/fonts/**/*.{ttf,woff,eot,svg}')

另一答案

总是依赖包将字体保存在特定文件夹中并不是最好的想法，这些事情可能会发生变化。

可能你在字体（一个文件夹级别）之前缺少另一个/**/。或者为什么所有这些检查，你知道字体将具有什么扩展，也许添加像**/*.{ttf,woff,eof,svg}这样的通配符

你有没有试过用gulp-main-bower-files管理它？ https://github.com/ck86/main-bower-files

另一答案

你可以测试我用它工作的这个任务

gulp.task('copyfonts', () =>
gulp.src('./app/assets/fonts/*')
    .pipe(gulp.dest('./dist/assets/fonts'))

);

另一答案

我遇到了同样的问题。运行我的gulp版本后，我的字体从未成功复制到我的dest / fonts文件夹。问题出在我的gulp.js文件中这些行：

function fonts() {
  return src('app/fonts/**/*.{eot,svg,ttf,woff,woff2}')
    .pipe($.if(!isProd, dest('.tmp/fonts'), dest('dist/fonts')));
};

编辑完最后一行后，我的字体成功复制了！

function fonts() {
  return src('app/fonts/**/*.{eot,svg,ttf,woff,woff2}')
    .pipe(dest('dist/fonts'));
};