sedとtrでcssのコメントなどを削除してファイルをダウンサイジングする #Linux

ウェブページの表示を早くするために、サーバーにアップロードするcssファイルのサイズを小さくしたいときがあります。

例えば、あるスタイルシートfile.cssが次の場合、

file.css

/*  import normalize */
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */

  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  /* 2 */

}

ターミナルで、次のコマンドを打つと、

ターミナル

# /*コメント*/を削除 | \nを削除 | 複数の連続スペースをスペース1つに置換
$ cat file.css | sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' | tr -d '\n' | tr -s ' ' > file-downsize.css

sedコマンドで/*と*/で囲まれたコメント(複数行にまたがったコメントでもオーケー)を削除し、trコマンドで改行コードを削除し、trコマンドで複数の連続スペースを1つのスペースに文字列置換します。正確には、/*と*/で囲まれた複数行を削除します。あまりないかもしれませんが、/* comments */ code のようにコメントと同じ行にコードがあるとコードも削除されます。動作はUbuntu 14.04で確かめました。

ダウンサイジングした出力ファイルfile-downsize.cssは次のとおりです。

file-downsize.css

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

コメント量などによりますが、ファイルサイズを半分くらいに削減できます。削減できるスペースがまだありますが、tr -d ' 'とコマンドして全てのスペースを削除するとcssの書き方によってはブラウザのレンダリングが正常に動作しない場合がありますので、スペースの全削除はしていません。また、はてなブログユーザーの方は、/* Responsive: yes */というコメントをcssの先頭に書かないとレスポンシブ対応されないので、これを追記する必要があります。

複雑なコマンドsed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba'は、Remove multi-line comments - Stack Overflowから使わせてもらいました。-rオプションは拡張正規表現を使用するの意味です。シングルクォートに囲まれた部分は複数行に分けて書けます。

sedスクリプト

:a
s%(.*)/\*.*\*/%\1%
ta
/\/\*/ !b
N
ba

プログラムは次のフローで動作します。Sed - An Introduction and Tutorial by Bruce Barnettを参考にして解読しました。

sedはファイルを1行ずつ読み込み、パターンスペースというメモリに保存します。
/*が見つからない場合は(/\/\*/ !b)、次の行へ(N, Nextのこと)、
/*が見つかる場合は、その行をパターンスペースに入れたままラベルaへ(ba, branch to label a:のこと)、
*に囲まれている文字列を見つけるまで繰り返し1行ずつ読み込み(s%(.*)/\*.*\*/%\1%とta, substitute, test to label a:のこと)、
*コメント*にマッチするすべての行を削除します。

%は他のどんな文字(例えば半角スペース)で置き換えてもよいです（sed, a stream editor - gnu.orgの3.2より）。

このスクリプトを少し改造すれば、htmlやjavascriptなど他のソースファイルのダウンサイジングもできると思います。