【gulp】htmlテンプレート「gulp-jade」についてメモメモ（２）～整形

gulp

2016.04.11

みなさまこんにちは、kouraku です。年度末の対応から落ち着きを取り戻しつつあり、4月に入ってようやく花見に行くことができました。今年は開花が早かったですが、その後寒い日が続いてくれたおかげで、満開の大岡川沿いを週末に散歩なんかしてみました。

さて今回は、前回のjadeサンプルで生成したHTMLを整形したいと思います。とりあえず、Pugに名前が変わる・・・ということなのですが、まだ公式も準備中のため、今回はそのまま「jade」で通したいと思います。

※前回の記事を元に進めていきます。

jade で生成されるHTMLのソース

前回のサンプルは、表示上は下図の通りですが・・・

前回のサンプル

しかし、ソースを見てみると、改行なしのminify状態になっていることが分かります。

jadeで生成されるHTMLのソース

別にこのままでも問題ないとは思いますが・・・通常の案件ではさすがにこの状態のまま納品というわけにはいきませんよね。ということで、このHTMLを整形するためのプラグインをインストールして使ってみたいと思います。

HTMLを整形してくれるプラグインたち

npmでHTMLを整形してくれるgulpプラグインを検索してみると、主に次の3つが見つかります。

ということで、それぞれインストールして結果を確認してみたいと思います。

gulp-prettify

以下のコマンドを叩いてプラグインをインストールします。

$ npm i gulp-prettify -D

次に、整形タスクを作成します。ここでは、ファイル及びタスク名を「beautify-html」とします。
インデントは、ここでは「タブ（\t）」で設定します。

[gulptasks/beautify-html.coffee]

gulp = require 'gulp'
config = prop.config
plugins = prop.plugins

# Beautify HTML
module.exports = do ->
  gulp.task 'beautify-html', ->
    console.log 'start BEAUTIFY-HTML!!!'
    gulp
    .src [
      config.paths.pub+'**/*.html'
    ]
    .pipe plugins.prettify
      indent_with_tabs: true
    .pipe gulp.dest config.paths.pub

前回作成した「compile-html」タスクの中で、整形タスクを実行させるように設定します。

[gulptasks/compile-html.coffee]

:

# Compile HTML
module.exports = do ->
  gulp.task 'compile-html', (cb) ->
    plugins.runSequence(
      'jade'
      'beautify-html' # ←追加
      cb
    )

あと、 タグを入れた場合の整形のされ方・・・なんかも一応見ておきたいので、 タグを文章の中に入れておきます。

[src/jade/pages/index.jade]

:

        p
            | Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            br
            | Placeat, vel eveniet nemo repudiandae dolore consequatur similique dicta voluptates accusamus laboriosam earum sed itaque ex aliquam unde minima illo et obcaecati?

準備ができたら、以下のコマンドを叩いて HTMLを生成します。

$ gulp compile-html

すると、下図の通りminifyされていたHTMLのソースが整形されました。

gulp-prettify を使用してHTMLを整形

インデントは、ちゃんと指定した通り「タブ」になっています。
ただ、<head>、<body>にもインデントが入っているので、気になる人は気になるかもしれません（自分は入っていない方が好きなので・・・）。
 は改行されずに文中に入る感じになっています。

「gulp-prettify」は他にもオプションがありますので、気になる方は「js-beautify」の Options をご参照ください。

gulp-html-prettify

以下のコマンドを叩いてプラグインをインストールします。

$ npm i gulp-html-prettify -D

次に、整形タスクの中で使用するプラグインを「plugins.prettify」から「plgins.htmlPrettify」に変更します。
インデント指定のプロパティが「gulp-prettify」と異なりますのでご注意ください。

 [gulptasks/beautify-html.coffee]

:

#   .pipe plugins.prettify
#       indent_with_tabs: true
    .pipe plugins.htmlPrettify
        indent_char: "\t"
        indent_size: 1
    .pipe gulp.dest config.paths.pub

それでは、以下のコマンドを叩いて HTMLを生成します。

$ gulp compile-html

下図の通りHTMLのソースが整形されました。

gulp-html-prettify を使用してHTMLを整形

こちらもインデントは、ちゃんと指定した通り「タブ」になっています。
<head>、<body>にはインデントが入っていません（自分はこちらの方が好き）。
 は改行されていて、インデントも1つ入っています。

こちらは、今回指定したプロパティ以外のオプションは記載されておりませんので、シンプルにHTMLのみ対象とした整形をする場合に使用すると良いかと思います。

gulp-html-beautify

以下のコマンドを叩いてプラグインをインストールします。

$ npm i gulp-html-beautify -D

次に、整形タスクの中で使用するプラグインを「plugins.htmlPrettify」から「plgins.htmlBeautify」に変更します。
インデント指定は「gulp-prettify」と同様です（その他オプションも同様です）。

 [gulptasks/beautify-html.coffee]

:

#   .pipe plugins.prettify
#       indent_with_tabs: true
#   .pipe plugins.htmlPrettify
#       indent_char: "\t"
#       indent_size: 1
    .pipe plugins.htmlBeautify
        indent_with_tabs: true
    .pipe gulp.dest config.paths.pub

それでは、以下のコマンドを叩いて HTMLを生成します。