使用css缩小进行远程字体导入

时间:2015-08-17 11:36:49

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

我试图连接&缩小所有凉亭包资产,包括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

单独运行此任务,其他任何事情都无法正常工作(据我可以通过极限测试来判断),但与其他任务一起运行会导致提到的错误。

2 个答案:

答案 0 :(得分:21)

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

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

答案 1 :(得分:0)

尝试使用npm:https://libraries.io/npm/roboto-font

本地化字体