使用 css 缩小的远程字体导入答案

【问题标题】：Remote font imports with css minification使用 css 缩小的远程字体导入
【发布时间】：2015-11-10 00:45:17
【问题描述】：

我正在尝试连接和缩小所有 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

单独运行此任务而其他任何事情都无法正常工作（据我所知，极限测试），但与其他任务一起运行会导致上述错误。

【问题讨论】：

当我使用 bootswatch 而不是纯 bootstrap 时同样的问题
已解决：stackoverflow.com/questions/32001352/…
仅供参考，gulp-minify-css 已经 deprecated 支持 gulp-clean-css

标签： css gulp google-font-api gulp-minify-css gulp-clean-css

【解决方案1】：

我也有同样的错误。解决方案：将 processImport: false 选项传递给 minifyCss 管道。

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

【讨论】：

拯救了我的一天。谢谢。
不幸的是，它消除了预取导入的能力，因此它不必在页面加载时执行它：-\。但感谢您的指点，def 有用的补丁

【解决方案2】：

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

【讨论】：