[Grunt & Yeoman] grunt-html-hint で html の lint/hint/validation をする
grunt-html-hint おすすめかも、というお話し。
% grunt -version
grunt-cli v0.1.10
grunt v0.4.1
2013/11/15 現在で、先月のダウンロード数が多い順。
Contents
grunt-html
インストール
% npm install --save-dev grunt-html
Gruntfile
一部のみ抜粋。
# grunt-html
htmllint:
all: [
'src/**/*.html'
]
実行
成功
% grunt htmllint
Running "htmllint:all" (htmllint) task
>> 2 files lint free.
Done, without errors.
失敗
% grunt htmllint
Running "htmllint:all" (htmllint) task
Linting src/index.html"... ERROR
[L10:C3] Saw "<" when expecting an attribute name. Probable cause
Linting src/index.html"... ERROR
[L10:C6] End tag had attributes.
Linting src/index.html"... ERROR
[L10:C27] Stray end tag "h2".
Warning: Task "htmllint:all" failed. Use --force to continue.
Aborted due to warnings.
grunt-html-validation
インストール
% npm install --save-dev grunt-html-validation
Gruntfile
一部のみ抜粋。
# grunt-html-validation
validation:
# options:
target: [
'src/**/*.html'
]
実行
成功
% grunt validation
Running "validation:target" (validation) task
Validation started for.. src/index.html
>> Validation successful..
Validated skipping..src/sample.html
失敗
% grunt validation
Running "validation:target" (validation) task
Validation started for.. src/index.html
1=> "Saw < when expecting an attribute name. Probable cause: Missing > immediately before." Line no: 10
2=> "End tag had attributes." Line no: 10
3=> "Stray end tag h2." Line no: 10
No of errors: 3
Validation started for.. src/sample.html
>> Validation successful..
Validation report generated: validation-report.json
Done, without errors.
ファイルが生成されていました。
- validation-status.json
- validation-report.json
grunt-html-hint
インストール
% npm install --save-dev grunt-htmlhint
Gruntfile
一部のみ抜粋。
# grunt-htmlhint
htmlhint:
options:
'tag-pair': true
# htmlhintrc: '.htmlhintrc'
html1:
src: ['src/**/*.html']
実行
.htmlhintrc がうまくパースされないので、上記の通りダイレクトで書き込んでみた。
% grunt htmlhint
Running "htmlhint:html1" (htmlhint) task
Warning: Unable to parse ".htmlhintrc" file (Unexpected token '). Use --force to continue.
Aborted due to warnings.
成功
% grunt htmlhint
>> Local Npm module "grunt-lib-phantomjs" not found. Is it installed?
Running "htmlhint:html1" (htmlhint) task
>> 2 files lint free.
Done, without errors.
失敗
% grunt htmlhint
Running "htmlhint:html1" (htmlhint) task
Linting src/index.html...ERROR
[L12:C1] Tag must be paired, Missing: [ </h1> ]
</body>
Warning: Task "htmlhint:html1" failed. Use --force to continue.
Aborted due to warnings.
grunt-html-inspector
インストール
% npm install --save-dev grunt-html-inspector
% npm install --save-dev grunt-lib-phantomjs
grunt-lib-phantomjs
のインストールに失敗して試せなかった。
結論
grunt-html-hint がいいかなと思うんですが、.htmlhintrc
の問題を解決する必要がありますね。
jsonlint で調べる
% npm install --save-dev grunt-jsonlint
Gruntfile.coffee
jsonlint:
npm:
src: ['package.json']
bower:
src: ['bower.json']
htmlhint:
src: ['.htmlhintrc']
% grunt jsonlint:htmlhint
Running "jsonlint:htmlhint" (jsonlint) task
>> File ".htmlhintrc" failed JSON validation.
Warning: Parse error on line 1:
{ 'tagname-lowercase':
---^
Expecting 'STRING', '}', got 'undefined' Use --force to continue.
Aborted due to warnings.
mumu.
公式サンプルをコピペしてました。
.htmlhintrc
{
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'doctype-first': true,
'tag-pair': true,
'spec-char-escape': true,
'id-unique': true,
'src-not-empty': true
}
ということで、動いてる方を探してみました。
.htmlhintrc
{
"tagname-lowercase": true,
"attr-lowercase": true,
"attr-value-double-quotes": true,
"attr-value-not-empty": true,
"doctype-first": true,
"tag-pair": true,
"tag-self-close": true,
"spec-char-escape": true,
"id-unique": true,
"head-script-disabled": true,
"img-alt-require": true,
"doctype-html5": true,
"id-class-value": "dash",
"style-disabled": true
}
再チェック
% grunt jsonlint:htmlhint
Running "jsonlint:htmlhint" (jsonlint) task
>> 1 file lint free.
Done, without errors.
よし!
% grunt htmlhint
Running "htmlhint:html1" (htmlhint) task
Linting src/index.html...ERROR
[L4:C3] The empty tag : [ meta ] must closed by self.
<meta charset="UTF-8">
[L6:C3] The empty tag : [ link ] must closed by self.
<link rel="stylesheet" href="/stylesheets/style.css">
[L9:C11] Special characters must be escaped : [ < ].
<h1>test</h1
[L12:C1] Tag must be paired, Missing: [ </h1> ]
</body>
Linting src/sample.html...ERROR
[L4:C3] The empty tag : [ meta ] must closed by self.
<meta charset="UTF-8">
Warning: Task "htmlhint:html1" failed. Use --force to continue.
Aborted due to warnings.
やったよ。オレ。
補遺
html-inspector
少しさわったんですが、すぐに動かず。
調べようかと思ったけれども、grunt で完結したい気分になって取りやめました。
いろいろできるみたい。