gulp-html-beautifyでコンパイル後のHTMLを綺麗に整形する方法

今回は「gulp環境でpugやejsをコンパイルした後のHTMLを綺麗に整形したい！」という人に向けて、gulp-html-beautifyの使い方を解説します。

フォーマットされたHTMLを見るとなんとなくいい気分になれます笑

gulp-html-beautifyをインストール
gulp-html-beautifyの使い方
まとめ

gulp-html-beautifyをインストール

npmで一発です。

$ npm i -D gulp-html-beautify

gulp-html-beautifyの使い方

gulpfile.jsにこんな感じで書きます。

普段使っているタスクの部分にhtml-beautifyの部分をそのままコピペしてもらえれば動くと思います。ちなみに僕は普段この設定にしてます。このままでもかなり綺麗。

const htmlbeautify = require("gulp-html-beautify")

gulp.task('pug', function () {
  return gulp
    .src([SRC + '**/*.pug', '!' + SRC + '**/_*.pug'])
    .pipe(pug())
    .pipe(htmlbeautify({
      "indent_size": 2,
      "indent_char": " ",
      "max_preserve_newlines": 0,
      "preserve_newlines": false,
      "extra_liners": [],
    }))
    .pipe(gulp.dest(DIST));
});

gulp-html-beautifyで指定できるオプションは以下の通りです（指定されている値はデフォルト値）。

好きなオプションだけ指定すればokです。一部よくわからないオプションもあったのでそこはデフォルトのままでいいと思います。

（不要）と書いてある場所はHTMLの整形には関係ないオプションなので無視でいいです。

{
    // インデント幅
    "indent_size": 4,
    // インデントに使う文字列。\tにするとタブでインデント
    "indent_char": " ",
    // 最終行の改行。基本的に\nでok
    "eol": "\n",
    // 初期インデント幅
    "indent_level": 0,
    // タブでインデントする。falseならスペースでインデント
    "indent_with_tabs": false,
    // コンパイル前のコードの改行を維持する。改行を無視して整形したいならfalseにする
    "preserve_newlines": true,
    // 許容する連続改行数。0にすると改行を全て削除してコンパイル
    "max_preserve_newlines": 10,
    // jslintのstrict modeを適用する（不要）
    "jslint_happy": false,
    // ユーザー定義関数の()の前にスペースを入れる。function ()みたいな感じ（不要）
    "space_after_anon_function": false,
    // ブレーススタイルを指定（不要）
    "brace_style": "collapse",
    // 配列のインデントを保持（不要）
    "keep_array_indentation": false,
    // 関数のインデントを保持（不要）
    "keep_function_indentation": false,
    // 制御構文の後にスペースを入れる。if (){}みたいな感じ（不要）
    "space_before_conditional": true,
    // メソッドチェーンを改行（不要）
    "break_chained_methods": false,
    // eval()関数を許容しない？（よくわからないけどHTMLには不要）
    "eval_code": false,
    // ？（放置でok）
    "unescape_strings": false,
    // コンパイル後の1行のコードがこの文字数を超えたら改行する。0なら改行しない（0が一番綺麗だと思います）
    "wrap_line_length": 0,
    // 属性を改行する。値はauto, force, force-aligned, force-expand-multiline。autoでいいと思います
    "wrap_attributes": "auto",
    // 属性を改行した時のインデント幅
    "wrap_attributes_indent_size": 4,
    // ファイルの最終行に改行を入れる
    "end_with_newline": false
}

また、gulp-html-beautifyはjs-beautifyを引き継いでいるので、js-beautifyのオプションも指定できます。

gulp-html-beautifyでも使えそうな値はこんなものがあります（被っているオプションは省略）。

{
    // <head>と<body>をインデントする
    "indent_inner_html": false,
    // inline要素として整形する。配列で指定（['span', 'em']みたいな）。指定した要素は改行されなくなる
    "inline": ['inline'],
    // 整形を適用しないタグ。配列で指定
    "unformatted": ['inline'],
    // 指定したタグの中にある要素には整形を適用しない。配列で指定
    "content_unformatted": ['pre'],
    // 終了タグの前に改行を入れるタグ。配列で指定。<head>, <body>, <html>の前で改行したくない場合は[]を指定
    "extra_liners": ['head', 'body', 'html'],
}

なお、js-beautifyのオプションは--indent-inner-htmlみたいに書かれていますが、gulp-html-beaitufyに指定するときは先頭のハイフン2つを削除して、残りのハイフンはアンダーバーに書き換えてindnet_inner_htmlといった形で指定します。

まあ使うのはextra_linersくらいな気がしますが…

＞＞gulp-html-beautify – npm

＞＞js-beautify