Remote font imports with css minification

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.

Zebulen

Same issue when i'm using bootswatch instead of pure bootstrap – Dacha

solved here: #32001852 – Buckskin

FYI gulp-minify-css has been deprecated in favor of gulp-clean-css – Primus

Answer 1

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

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

Scourge

Unfortunately it removes the power that is prefetching the import so it doesn't have to do it on page load :-\. But thanks for the pointer, def helpful patch – Seng

Answer 2

Try localizing your font with npm: https://libraries.io/npm/roboto-font

Xanthate