HTMLを簡単に整形できるフォーマッターの「gulp-html-beautify」の紹介です。Gulpを動かせることが前提なのでGulpが分からない方は以下の記事を参考にしてください。
あわせて読みたい
静的HTMLサイト制作を楽にするGulpの基本的な使い方【Webコーダー向け】
Gulpは、いろんな作業を自動化してくれるツールです。 CSSやHTMLを保存したらブラウザ側も自動的にリロード Sassが保存されたタイミングで自動コンパイル CSSにベンダー…
「gulp-html-beautify」のおすすめポイントとしては、以下の2点です。
- オプションが豊富で柔軟に指定できる
- 要素後のコメントが改行されない
個人的には要素後のコメントが改行されないのがとてもありがたいなって思っています。
（改行するHTMLフォーマッターが多い…）
はにわまんソースコードのフォーマット系は、完全に機械に任せちゃったほうが楽です
目次
「gulp-html-beautify」のインストール
npm install -seve-dev gulpnpm install -seve-dev gulp-html-beautify「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の紹介ページからオプションの一覧を引用すると以下のとおりです。改行コードや最終行は空白にするか、などフォーマット系の指定をしたことがる人ならおなじみの設定がちゃんと行えるようになっております。
npm
gulp-html-beautify
This is a gulp plugin to beautify HTML files.. Latest version: 1.0.1, last published: 6 years ago. Start using gulp-html-beautify in your project by running `np…
{
"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」の紹介でした。こういうパッケージを作ってくれる先人には本当にいつも感謝ですね…。
フォーマットなど、機械に自動化させられる部分は先人の恩恵を受けつつどんどん楽にしていきましょう！
