2

我正在使用gulp-htmllint来检查带有 html 片段的文件。但是，令我惊讶的是，它会跳过带有无效标记的文件。我很想获得“尽可能好”的 linting，但至少我希望它失败/报告 invalid html 错误。

这是一个复制品。首先gulpfile.js（需要事先适当的npm install命令）：

var gulp = require("gulp"),
    gutil = require('gulp-util'),
    htmllint = require("gulp-htmllint"), 
    path = require('path');

gulp.task("default", [], function() {
    return gulp.src("src/*.html")
        .pipe(htmllint({}, reporter));
});

function reporter(filepath, issues) {
    var filename = path.basename(filepath);
    if (issues.length > 0) {
        issues.forEach(function (issue) {
            gutil.log(gutil.colors.cyan('[lintHtml] ') + gutil.colors.white(filename + ' [' + issue.line + ',' + issue.column + ']: ') + gutil.colors.red('(' + issue.code + ') ' + issue.msg));
        });
        process.exitCode = 1;
    }
}

这reporter是基于包主页上的示例。

使用此src/fragment.html文件：

<span style="color: red;">Test 1.</span>
<span style="color: green;">Test 2.</span>

我会很好地得到：

[08:04:06] Using gulpfile ~\myapp\gulpfile.js
[08:04:06] Starting 'default'...
[08:04:06] [lintHtml] fragment.html [1,6]: (E001) the `style` attribute is banned
[08:04:06] [lintHtml] fragment.html [2,6]: (E001) the `style` attribute is banned
[08:04:06] Finished 'default' after 38 ms

但是，如果我像这样使 html 文件无效：

<span style="color: red;"Test 1.</span>
<span style="color: green;">Test 2.</span>

我得到：

[08:05:06] Using gulpfile ~\myapp\gulpfile.js
[08:05:06] Starting 'default'...
[08:05:06] Finished 'default' after 25 ms

好像没有什么不妥。

当我的片段出现此类问题时，如何让流程报告错误并失败？

PS。我最终也将作为问题交叉发布到 Github。

4

1 回答 1

5

如果不更改 gulp-htmllint 本身，就无法做到这一点。如果您查看源代码，您会发现它只为 htmllint 承诺提供了一个成功处理程序：

lint.then(function(issues) {
    issues.forEach(function(issue) {
        issue.msg = issue.msg || htmllint.messages.renderIssue(issue);
    });
    reporter(file.path, issues);
});

要输出由于无效 html 而导致 linting 过程失败的情况，它还必须提供一个拒绝处理程序：

lint.then(function(issues) {
    issues.forEach(function(issue) {
        issue.msg = issue.msg || htmllint.messages.renderIssue(issue);
    });
    reporter(file.path, issues);
}).catch(function(error) {
    //do something useful here
    console.log(file.path + ': ' + error.toString());
});

这意味着您有两种选择：

  • 在 github 上 fork 项目并自己实现
  • 找到另一个执行此操作的 gulp 插件（可能是 gulp-htmlhint或gulp -html5-lint？）
于 2016-02-15T08:35:36.483 回答