防止gulp-htmllint跳過無效的html文件

Question

我正在用gulp-htmllint檢查帶有html片段的文件。 但是，令我驚訝的是，它會跳過帶有無效標記的文件。 我希望獲得“盡可能的好”的掉毛，但是至少我希望它失敗/報告無效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 。

Answer 1

如果不更改gulp-htmllint本身，則無法執行此操作。 如果您查看源代碼，則會看到它僅為htmllint Promise提供成功處理程序：

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

要輸出由於無效的html而導致插入過程失敗的情況，它還必須提供拒絕處理程序：

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上分叉項目並自己實現
• 查找執行此操作的另一個gulp插件（也許是gulp-htmlhint或gulp -html5-lint嗎？）