HTML形式のインデントをスペースでフォーマットできる「gulp-html-beautify」

HTMLを簡単に整形できるフォーマッターの「gulp-html-beautify」の紹介です。Gulpを動かせることが前提なのでGulpが分からない方は以下の記事を参考にしてください。

静的HTMLサイト制作を楽にするGulpの基本的な使い方【Webコーダー向け】

「gulp-html-beautify」のおすすめポイントとしては、以下の2点です。

• オプションが豊富で柔軟に指定できる
• 要素後のコメントが改行されない

個人的には要素後のコメントが改行されないのがとてもありがたいなって思っています。
（改行するHTMLフォーマッターが多い…）

「gulp-html-beautify」のインストール

コピーnpm install -seve-dev gulp

コピーnpm install -seve-dev gulp-html-beautify

公式 → gulp-html-beautify – npm

「gulp-html-beautify」の使い方

gulpfile.jsコピーvar gulp = require("gulp");
var htmlbeautify = require("gulp-html-beautify");

gulp.task('htmlbeautify', function(done) {
  var options = {
    indent_size: 2,
		indent_with_tabs: true
  };
  gulp.src('./src/*.html')
    .pipe(htmlbeautify(options))
    .pipe(gulp.dest('./dest/'));
	done();
});

以下のコマンドで実行が可能になります。

コピーgulp htmlbeautify

「gulp-html-beautify」のオプション

「gulp-html-beautify」で指定できるオプションと初期値は以下のとおりです。インデントの幅を変更したい場合は、オプションとして{ indent_size: 2 }を指定してあげて、上書きしてあげればOKです。

npmの紹介ページからオプションの一覧を引用すると以下のとおりです。改行コードや最終行は空白にするか、などフォーマット系の指定をしたことがる人ならおなじみの設定がちゃんと行えるようになっております。

コピー{
    "indent_size": 4,
    "indent_char": " ",
    "eol": "\n",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 10,
    "jslint_happy": false,
    "space_after_anon_function": false,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": false,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 0,
    "wrap_attributes": "auto",
    "wrap_attributes_indent_size": 4,
    "end_with_newline": false
}

引用: gulp-html-beautify – npm

もしインデントをタブのスペースは2とする場合は、以下のような指定となるわけです。

コピーvar options = {
	indent_size: 2,
	indent_with_tabs: true
};

おわり

HTMLを簡単に整形できるフォーマッターの「gulp-html-beautify」の紹介でした。こういうパッケージを作ってくれる先人には本当にいつも感謝ですね…。

フォーマットなど、機械に自動化させられる部分は先人の恩恵を受けつつどんどん楽にしていきましょう！