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

Question

我正在尝试连接和缩小所有 Bower 包资产，包括 css。其中之一是 bootswatch design，它导入 google 字体。问题是，运行 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

运行单独执行此任务，其他任何任务都无法正常工作（据我所知，通过极限测试），但运行它与其他任务一起导致提到的错误。

Answer 1

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

Answer 2

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

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

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

Remote font imports with css minification

css

google-font-api

gulp

gulp-minify-css

gulp-clean-css