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

Question

所以我使用 gulp 作为任务引擎来处理更少的编译（除其他外），我们的部分样式表包括来自 fonts.com.

的字体

这是我们 gulp 文件中的相关任务：

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';（正在使用 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 对我来说是运行在无头服务器上，没有浏览器说），所以我尝试注释行：.pipe(reload({stream:true})) 和 .pipe(plugins.livereload())，但结果没有改变。

我也在和 fonts.com 讨论为什么我们突然遇到 500 错误，但从本质上讲，我觉得 gulp-less 不应该尝试在使用 css 关键字时加载那些 urls - 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) returns 进行 HTTP 调用时出现 500 错误。为了解决这个问题，我们使用 HTTPS，它按预期工作。

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

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

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

这不会尝试将快速字体 URL 作为 css 的一部分...并且应该稍微加快它的速度。它不是 gulp-less 抛出错误，如您所想，而是 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

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

Ignore certain Gulp-less errors, or prevent it from attempting to call @imports with css keyword

error-handling

fonts

less

gulp