使用CSS最小化导入远程字体

Question

I'm trying to concatenate & minify all bower package assets including css. One of them is bootswatch design and it imports google fonts. Problem is, running css tasks on it results in timeout exception. I'm guessing it is trying to download those fonts and it takes too long as exception does not occur every single time.

How would I go about resolving it?

Gulp imports:

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

Gulp task:

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

Exception:

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

Running this task alone and nothing else works fine always (as far as I can tell with limit testing), but running it in conjuction with other tasks results in mentioned error.

Answer 1

I'd same bug. Solution: pass processImport: false option to minifyCss pipe.

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

Answer 2

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