fonts - 忽略某些 Gulp-less 错误，或阻止它尝试使用 css 关键字调用 @imports

Question

因此，我使用 gulp 作为任务引擎来处理较少的编译(除其他外)，并且我们的部分样式表包含来自 fonts.com 的字体。

这是我们 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' }));
});

以及文件中的相关行:font/base/stylesheet.css，它包含在上述一些源文件中，如下所示: @import (less) '../font/base/stylesheet.css css'; (这里使用 less 指令，因为我们在文件中使用变量 - @{FONT_PATH_PREFIX} - 来处理它从各个不同位置包含的事实):

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

现在是问题本身:截至上周五，我们在浏览该 URL 时遇到 500 错误，这导致 gulp 失败，并显示:

[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

到目前为止我已经尝试了一些事情但没有成功:

在 font/base/stylesheet.css 文件中，我尝试将关键字 css 和 optional 添加到 @import 行(两者都一起和单独)，但是无论哪种方式我都会得到相同的结果。

我发现 events.js 文件是 browsersync 模块的一部分，我并没有真正使用它(gulp 对我来说在 headless 服务器上运行，没有浏览器可言)，所以我尝试注释这些行: .pipe(reload({stream:true})) 和 .pipe(plugins.livereload())，但结果没有变化。

我也在与 fonts.com 讨论为什么我们突然出现 500 错误，但本质上我觉得 gulp-less 不应该在 css 关键字为使用 - import 语句应该直接获取输出以供浏览器在加载 css 时处理，对吗？

我也觉得我也许可以防止抛出错误，但我在这方面还没有取得任何进展。我尝试更改错误处理程序:

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

...正如我在 gulp-less 页面上读到的那样，如果有处理程序，则不应抛出错误，并且我认为 util.log 处理程序很可能只是重新抛出错误，但是没有到达任何地方。

这里最好的做法是什么？这只是浏览量跟踪 url，所以老实说，我不在乎它是否加载或其中包含有效的 css(特别是在编译时)，我只需要在最终 css 中导入声明以满足 fonts.com 的要求。

Answer 1

上周五也遇到了同样的错误。我认为这里的主要问题是对 fonts.com (fast.fonts.net) 进行 HTTP 调用会返回 500 错误。为了解决这个问题，我们使用了 HTTPS，它按预期工作。

我不确定为什么 HTTP 会抛出 500 错误，但也许他们现在只支持 HTTPS...可能吗？但是，我在任何地方都找不到对此的提及，因此我现在将其视为错误。如果支持已停止，那么我希望重定向到位。

此外，您也可以修复 gulp 管道中的问题。您需要将 processImport 参数传递给 minifyCss 作为 false。

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

这不会尝试将快速字体 URL 作为 CSS 的一部分......并且也应该稍微加快速度。正如您所想的那样，它并不是简单地抛出错误，而是 minifyCss (它是 clean-css 的包装器)。

注意:您可能需要检查最终的 CSS，以确保它正确包含其他所有内容(应该很好，因为您的 LESS 处理已经完成)。

还有人知道 fast.fonts.net 现在返回 500 吗？我发推文表示支持，但没有回复。我在其他地方找不到任何提及它的信息。

编辑:您可以通过比较两者的响应来看到这一点
http://fast.fonts.net/t/1.css?apiType=css&projectid=API_KEY和
https://fast.fonts.net/t/1.css?apiType=css&projectid=API_KEY