使用远程字体导入和CSS压缩技术

Question

我正在尝试合并和压缩所有bower包（包括CSS）的资产。其中一个是Bootswatch设计，它导入谷歌字体。问题是，在其上运行CSS任务会导致超时异常。我猜测它正在尝试下载那些字体，而且由于不是每次都出现异常，所以可能需要很长时间。

我该如何解决这个问题？

Gulp的导入：

var gulpMinifyCss = require('gulp-minify-css');
var gulpConcatCss = require('gulp-concat-css');
var mainBowerFiles = require('main-bower-files');
var gulpFilter = require('gulp-filter');

Gulp任务：

gulp.task('compileBowerCss', function(){
    return gulp
        .src(mainBowerFiles())
        .pipe(gulpFilter('*.css'))
        .pipe(gulpConcatCss('bower.css'))
        .pipe(gulpMinifyCss())
        .pipe(gulp.dest(assetsFolder + cssFolder));
});

异常：

events.js:85
  throw er; // Unhandled 'error' event
        ^
Error: Broken @import declaration of "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" - timeout

只有运行这个任务本身，不和其他任务一起运行时，似乎总是正常工作的（经过限制测试），但如果与其他任务一起运行，则会出现上述错误。

- Felini

---

使用 Bootswatch 而非纯 Bootstrap 时出现相同问题。 - S Panfilov

已解决：https://dev59.com/M47da4cB1Zd3GeqP8RNV?rq=1 - Paul Kozlovitch

FYI，gulp-minify-css已被弃用，推荐使用gulp-clean-css。 - scniro

Answer 1

我遇到了同样的问题。解决方法是在minifyCss管道中传递processImport: false选项。

.pipe(gulpMinifyCss({processImport: false}))

- imilbaev

---

救了我的一天。谢谢。 - Striped

不幸的是，它会移除预取导入的功能，因此不得不在页面加载时执行它 :-\。但感谢您的指针，这个有用的补丁很有帮助。 - webdevinci

Answer 2

尝试使用npm本地化您的字体：https://libraries.io/npm/roboto-font

- Mohammed Ibrahim