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

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

「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」の使い方

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
}

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

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

おわり

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

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

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

WordPressが得意なWeb屋。HPcode代表。

300件以上のWordPressカスタマイズを対応してきました。SE → 農家 → アフィリエイター → Web屋。生まれは三重県。

目次