Komodo Edit で正規表現を使って HTML や CSS を軽量化する

CSS の圧縮サービスは色々ありますが、いちいちブラウザ上でコピペするのは面倒です。特にレンタルブログなんて使ってたらタブやウィンドウの移動が多発します。そこで、不要な改行やタブ、スペースだけでもローカルで取り除けないか考えてみました。

Komodo Edit にはターミナル機能があるので command +R で直にコマンドを入力するか、シェルスクリプトを書いて実行させます。今回はちょっと長くなりそうなのでシェルスクリプトを書きます。

「改行を削除する」でぱっと思いついたのが sed コマンドでしたが、Mac に入ってる BSD の sed だと改行を取り除くのが面倒みたいです。後に調べて、改行やタブなら tr -d '\n\t' で取り除けるのがわかりましたが、他の置き換えもしたかったので perl を使うことにしました。

min-file.sh
#!/bin/bash

cat "$@" \
| perl -pe 's/(^\s+|\n|\t)//g' \
| perl -pe 's/  +/ /g' \
| perl -pe 's/\/\*.+?\*\///g'

HTML の場合、書き方によっては変換後にレイアウトが変わってしまったりすることもあるので自分の書き方に合わせてって感じでしょうか(例えば改行を半角スペースとして使ってたりすると困る)。

上のコマンドの内容はこんな感じ。

  1. 先頭の空白または改行、タブを削除
  2. 2個以上のスペースを1個に縮める
  3. コメントエリアの削除

で、このスクリプトを適当なところに配置して実行権限をつけたら Komodo Edit のコマンドに追加します。%F は Komodo Edit の変数でファイルのフルパスが含まれます。


クリップボードにコピー

出力結果をパイプと pbcopy でクリップボードへコピー。

~/shellscripts/min-file.sh "%F" | pbcopy

ファイル全体じゃなく、選択範囲だけなら Automator でサービスを作ってコンテキストメニューから呼び出しっていうのもいいかな〜、って思ったけど Komodo Edit だと表示されないな…。


別名で保存

ファイルとして保存するときは元のファイルと区別するためにファイル名を変更する。Komodo Edit の変数には「拡張子なしのファイル名」はあったけど「ファイルの拡張子」という変数はないようなのでここでも perl を使って置き換える。[拡張子]と[その他]に分解して _min という文字列を追加する。

~/shellscripts/min-file.sh "%F" > $(echo %f | perl -pe 's/(.+?)(\.\w+)$/$1_min$2/')

git や svn 使ってるならあとはコミットなりプッシュする。コマンドをツールボックスに登録しておけばここまでをダブルクリック×2回で済ませられます。


左がソースで右が変換後。実際、上のスクリプトだとちょっとスペースが残るので少し変更してます。30,416 バイトから 23,501 バイトに減量。

Komodo Edit

軽量化できたとしても数十キロバイト程度だし、最近のインターネット環境だとメリットは少ないだろうけど、無駄なコード含んだままサーバーに置いておくよりはマシかな。

HTML でも使えるけど、もし <pre> を使ってたら対象外にしなくちゃいけないし、CSS のコメント検出パターンが誤動作する可能性もあるので if とか case で拡張子別に条件わけないとダメだなぁ。

perl か ruby だけでやりたいな〜とも思うけどまだ覚えてない。