GruntでHTML InspectorをHTMLファイルに自動挿入して実行する

公開

以前何かがきっかけでチェックしたツール「HTML Inspector」の導入を検討しているのですが、HTMLファイルにツールの読み込み・起動をするためのscript要素を書かなければならないのがハードルだなと感じました。リリース時にうっかりコードを残したままにする可能性がありますし、HTML設計時にコードを追加したりリリース時にコードを削除したりするのがとても手間です。コマンドラインでの操作もイマイチ...。

そこで思いついたのが、Gruntのconnect-livereloadのように、自動でスクリプトをHTMLにインジェクションすることでした。早速試してみたところ、connect-livereloadのindex.jsにHTML Inspectorの読み込みを追加すると、ひとまず目論見通り動いてくれましたので、導入方法をご紹介します。

導入方法

下記の記述で、ブラウザ拡張の不要のライブリロードとHTML Inspectorが一度に動作します。

パッケージの導入

パッケージがhideki-a / connect-inject-snippetsにあるので、次のコマンドでプロジェクトディレクトリにインストールします。

npm install --save-dev git://github.com/hideki-a/connect-inject-snippets.git

Gruntfileの編集

Gruntfile.coffeeを下記のように設定します。Gruntfile.jsの方は、Js2coffee等で変換してみてください。

'use strict'
LIVERELOAD_PORT = 35729
supportSnippet = require('connect-inject-snippets')(
 port: LIVERELOAD_PORT
 htmlInspector: true
)
mountFolder = (connect, dir) ->
 return connect.static(require('path').resolve(dir))

module.exports = (grunt) ->
 grunt.initConfig
 connect:
 livereload:
 options:
 hostname: '0.0.0.0'
 port: 3501
 middleware: (connect, options) ->
 return [
 supportSnippet
 mountFolder(connect, './htdocs')
 ]

 # Load grunt tasks.
 require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)

 # Register tasks.
 grunt.registerTask 'default', [
 'compass:dev'
 'connect'
 'watch'
 ]

 return;

補足

  • htmlInspectorをfalseにすると、HTML Inspectorが無効になります。
  • inspectorConfig オプションで、Configuring HTML Inspectorの内容が指定できます。 
    supportSnippet = require('connect-inject-snippets')(
 port: LIVERELOAD_PORT
 htmlInspector: true
 inspectorConfig:
 excludeElements: [".page-contents"]
)