イラストレーターみやびの漫画館 作品集 - 月の高いところのロゴマーク

今日のプリン言

謎のプリン語る。
一人書く人増えました。

Gulp、HTMLの圧縮(PHPer向き、PHP入りHTMLの圧縮)

2017年05月18日

みやびプリン 140 87

500 320

Gulp、HTMLの圧縮(PHPer向き、PHP入りHTMLの圧縮) - サムネイル

どうも、目覚めた人類こと、みやびプリンです。
(↑いっぺん死んでこい)

最近、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に関しては変数名とかあるわけでもなし。
構文間違っている時に自動で修正されてしまったら、
スクリプトのために意図的にやっていることまで直ってしまう。

というわけで、じゃんじゃん使ってください。
そして当サイトの拡大を

トラックバック(0)

トラックバックURL:

コメントする