※この記事は7年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
どうも、目覚めた人類こと、みやびプリンです。
(↑いっぺん死んでこい)
最近、Gulp挑戦しております。
扱えたらなまら便利よね。
その中で、保存時にファイルを圧縮なんてやれるから便利で、
HTMLの圧縮もしちゃおう、ということで、
調べて出る中で、使ってて一番いいと思ったのは下記だ。
gulp-htmlmin
HTML整形を一番まともにしてくれる。
gulp-minify-html もあるが、
属性のダブルクォーテーションが消えたりと、目も当てられない状態になった。
だが、このgulp-htmlmin、非常に不満である。
何が不満というかダメってと、下記になる。
- ・PHP、JavaScript(以下JS)部分が圧縮されない。
- ・スクリプトの複数行コメントを使うと、うまくいかない。
- ・閉じタグのみの場合、消される。
まぁ、上の二つはいいとしよう。
スクリプト部分なんて、ユーザーからは見えんし。
だが、最後のやつが、非常にやっかい!!
通常のHTMLならいいが、うちの会社は、PHPのフレームワークでパーツ分けをしているため、
閉じタグのみが存在するなんてしょっちゅうだ。
PHPerのみなさんもそういう人ほとんどでしょう。
PHP入りのHTMLをうまく圧縮する方法を探してたでしょう。
じゃぁ、どうするかって?
プラグインを自作するしかない。
自作してnpmにあげたったよ。
npm install gulp-phtml-simple-comp
でインストールできるからじゃんじゃん使ったってください。
使い方はいたってシンプル。
下記のようにタスクを書く。
※基本的なGulpの使い方はこちら
var gulp = require('gulp'), htmlComp = require('gulp-phtml-simple-comp'); gulp.task('build-html', function() { gulp.src('./root/uncomp/**/*.php') .pipe(htmlComp()) .pipe(gulp.dest('./root')); }); gulp.task('default', ['build-html']);
もうね、php入りのhtmlの場合さ、コードチェックとかいらんのよ。
そんまま一行化せっちゅーねん。
シンプルにいこうぜ。
というわけで、やっていることとしては、下記だ。
- ・行頭のタブと空白削除
- ・スクリプト内一行コメント削除(//から始まるやつ)
- ・複数行コメント削除(/**/とか<!-- -->)
※ただし、意図的なHTMLコメント(たとえば、</li><!-- --><li> など)、
HTMLコメントの間にPHPが挟まっている場合、
条件付きコメントは削除対象外 - ・<?phpaaaとかにならないように、<?phpを調整
- ・そのまま一行化
他余計なことは一切やっていない。
シンプルが一番だよ。JSとかなら、むしろいろいろ処理してくれて嬉しいが、
こと、HTMLに関しては変数名とかあるわけでもなし。
構文間違っている時に自動で修正されてしまったら、
スクリプトのために意図的にやっていることまで直ってしまう。
というわけで、じゃんじゃん使ってください。
そして当サイトの拡大を
コメントする