grunt-html-hint おすすめかも、というお話し。

[markdown]
“`prettyprinted
% grunt -version
grunt-cli v0.1.10
grunt v0.4.1
“`

2013/11/15 現在で、先月のダウンロード数が多い順。

## grunt-html

> * [grunt-html](https://npmjs.org/package/grunt-html)

### インストール

“`prettyprinted
% npm install –save-dev grunt-html
“`

### Gruntfile

一部のみ抜粋。

“`
# grunt-html
htmllint:
all: [
‘src/**/*.html’
]
“`

### 実行

成功

“`prettyprinted
% grunt htmllint
Running “htmllint:all” (htmllint) task
>> 2 files lint free.
Done, without errors.
“`

失敗

“`prettyprinted
% 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 > * [grunt-html-validation](https://npmjs.org/package/grunt-html-validation)

### インストール

“`prettyprinted
% npm install –save-dev grunt-html-validation
“`

### Gruntfile

一部のみ抜粋。

“`
# grunt-html-validation
validation:
# options:
target: [
‘src/**/*.html’
]
“`

### 実行

成功

“`prettyprinted
% grunt validation
Running “validation:target” (validation) task
Validation started for.. src/index.html
>> Validation successful..
Validated skipping..src/sample.html
“`

失敗

“`prettyprinted
% 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

> * [grunt-htmlhint](https://npmjs.org/package/grunt-htmlhint)

### インストール

“`prettyprinted
% npm install –save-dev grunt-htmlhint
“`

### Gruntfile

一部のみ抜粋。

“`
# grunt-htmlhint
htmlhint:
options:
‘tag-pair’: true
# htmlhintrc: ‘.htmlhintrc’
html1:
src: [‘src/**/*.html’]
“`

### 実行

.htmlhintrc がうまくパースされないので、上記の通りダイレクトで書き込んでみた。

> * [Rules · yaniswang/HTMLHint Wiki · GitHub](https://github.com/yaniswang/HTMLHint/wiki/Rules)

“`prettyprinted
% grunt htmlhint
Running “htmlhint:html1” (htmlhint) task
Warning: Unable to parse “.htmlhintrc” file (Unexpected token ‘). Use –force to continue.
Aborted due to warnings.
“`

成功

“`prettyprinted
% 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.
“`

失敗

“`prettyprinted
% grunt htmlhint
Running “htmlhint:html1” (htmlhint) task
Linting src/index.html…ERROR
[L12:C1] Tag must be paired, Missing: [

]

Warning: Task “htmlhint:html1” failed. Use –force to continue.
Aborted due to warnings.
“`

## grunt-html-inspector

> * [grunt-html-inspector](https://npmjs.org/package/grunt-html-inspector)

### インストール

“`prettyprinted
% npm install –save-dev grunt-html-inspector
% npm install –save-dev grunt-lib-phantomjs
“`

`grunt-lib-phantomjs` のインストールに失敗して試せなかった。

## 結論

grunt-html-hint がいいかなと思うんですが、`.htmlhintrc` の問題を解決する必要がありますね。

### jsonlint で調べる

“`prettyprinted
% npm install –save-dev grunt-jsonlint
“`

Gruntfile.coffee

“`
jsonlint:
npm:
src: [‘package.json’]
bower:
src: [‘bower.json’]
htmlhint:
src: [‘.htmlhintrc’]
“`

“`prettyprinted
% 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.
公式サンプルをコピペしてました。

> * [Usage · yaniswang/HTMLHint Wiki · GitHub](https://github.com/yaniswang/HTMLHint/wiki/Usage)

.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
}
“`

ということで、動いてる方を探してみました。

> * [tribe/.htmlhintrc at master · andrewshawcare/tribe · GitHub](https://github.com/andrewshawcare/tribe/blob/master/.htmlhintrc)

.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
}
“`

### 再チェック

“`prettyprinted
% grunt jsonlint:htmlhint
Running “jsonlint:htmlhint” (jsonlint) task
>> 1 file lint free.
Done, without errors.
“`

よし！

“`prettyprinted
% grunt htmlhint
Running “htmlhint:html1” (htmlhint) task
Linting src/index.html…ERROR
[L4:C3] The empty tag : [ meta ] must closed by self.

[L6:C3] The empty tag : [ link ] must closed by self. [L9:C11] Special characters must be escaped : [ < ].

test

]

Linting src/sample.html…ERROR
[L4:C3] The empty tag : [ meta ] must closed by self.

Warning: Task “htmlhint:html1” failed. Use –force to continue.
Aborted due to warnings.
“`

やったよ。オレ。

## 補遺

### html-inspector

少しさわったんですが、すぐに動かず。
調べようかと思ったけれども、grunt で完結したい気分になって取りやめました。

> * [html-inspector](https://npmjs.org/package/html-inspector)

いろいろできるみたい。

> * [一歩進んだHTML/CSS/JSを目指すために | 1000ch.net](http://1000ch.net/2013/08/01/FrontendCodingEnvironment/)
> * [GruntでHTML InspectorをHTMLファイルに自動挿入して実行する｜Blog｜Skyward Design](http://www.skyward-design.net/blog/archives/000169.html)
[/markdown]