问题描述:

So I am using gulp as a task engine to handle less compilation (among other things), and part of our stylesheets include fonts from fonts.com.

Here's the relevant task in our gulpfile:

var gulp = require('gulp'),

plugins = require('gulp-load-plugins')({ camelize: true });

browserSync = require('browser-sync');

reload = browserSync.reload;

gulp.task('styles', function() {

gulp.src(['less/styles.less',

'less/special-styles.less',

'less/special-styles2.less',

'less/special-styles3.less',

'less/special-styles4.less',

'less/special-styles5.less',

'less/special-form-styles.less'])

.pipe(plugins.less())

.on('error', plugins.util.log)

.pipe(plugins.autoprefixer('last 15 versions', 'ie 8', 'ios 6', 'android 4'))

.pipe(plugins.rename({ suffix: '.min' }))

.pipe(plugins.minifyCss())

.pipe(reload({stream:true}))

.pipe(gulp.dest('css'))

.pipe(plugins.livereload())

.pipe(plugins.notify({ message: 'Styles task complete' }));

});

and the relevant line from a file: font/base/stylesheet.css, which is included from some of the above sourced files like so: @import (less) '../font/base/stylesheet.css'; (The less directive is being used here as we use a variable - @{FONT_PATH_PREFIX} - within the file to handle the fact that it get included from various different locations) :

@import url("http://fast.fonts.net/t/1.css?apiType=css&projectid=API_KEY");

Now the issue itself: as of last Friday we are getting a 500 error browsing to that URL, which results in gulp failing with:

[09:55:33] Starting 'styles'...

[09:55:33] Finished 'styles' after 420 ms

events.js:72

throw er; // Unhandled 'error' event

^

Error: Broken @import declaration of "http://fast.fonts.net/t/1.css?apiType=css&projectid=API_KEY" - error 500

I've tried a few things so far in vain:

In the font/base/stylesheet.css file I have tried adding the keywords css and optional to the @import line (both together and alone), however I get the same result either way.

I found that the events.js file is part of the browsersync module, which I don't really use (gulp is running on a headless server for me, no browser to speak of), so I tried commenting the lines: .pipe(reload({stream:true})) and .pipe(plugins.livereload()), but the result was unchanged.

I am also speaking with fonts.com about why we are gettign a 500 error all of a sudden, but at the heart of it I feel like gulp-less shouldn't be trying to load those urls when the css keyword is used - the import statement should just be getting output directly for the browser to handle when it loads the css, right?

I also get the feeling I could maybe prevent the error from being thrown, but I haven't gotten anywhere on that front. I tried changing the error handler for:

.on('error', function(){plugins.util.log(arguments);return;}

...as I read on the gulp-less page that the error should not be thrown if there was a handler for it, and I figured that the util.log handler may well just re-throw the error, but that didn't get anywhere.

What's the best course of action here? This is just the pageview tracking url, so honestly I don't care whatsoever if it loads or has valid css in it (Especially not at compile time), I just need that import statement in my final css for fonts.com's requirements.

网友答案:

Came across this same error last Friday also. I think the main issue here is that making an HTTP call to fonts.com (fast.fonts.net) returns a 500 error. To fix this we're using HTTPS which is working as expected.

I'm not sure why HTTP throws a 500 error but maybe they're only supporting HTTPS now... possibly? However, I can't find a mention of this anywhere so I'm treating it as a bug for now. If support has been stopped then I'd expect redirects to put in place.

Also, you can fix the problem in your gulp pipeline too. You need to pass in a processImport parameter to minifyCss as false.

...  
.pipe(plugins.minifyCss({processImport: false}))  
...

That will not try to include the fast fonts URL as part of the css... and should speed it up slightly too. It's not gulp-less throwing the error, as you thought, but minifyCss (which is a wrapper around clean-css).

NOTE: you may want to check the final CSS to make sure it's including everything else correctly (should be good as your LESS processing has already been done).

Anyone else know they fast.fonts.net is now returning a 500? I've tweeted at support but not answer. I can't find any mention of it elsewhere.

EDIT: You'll see this by comparing the response to both
http://fast.fonts.net/t/1.css?apiType=css&projectid=API_KEY and
https://fast.fonts.net/t/1.css?apiType=css&projectid=API_KEY

相关阅读:
Top