production.cssの変更内容を確認する方法

Before

圧縮されたCSSの変更内容を確認したいことってよくありますよね。
でも、diffコマンドなどで比較しても、次のように無駄な部分が多く、どこが変更されたのかわかりません。

$ diff -u /tmp/base.css /tmp/head.css
--- /tmp/base.css       2015-10-01 12:08:16.170860000 +0900
+++ /tmp/head.css       2015-10-01 12:08:23.834860000 +0900
@@ -1 +1 @@
-html{font-family:sans-serif;-webkit-text-size-adjust:none}body{margin:0;padding:0;color:#333;background:#FFF;font-size:12px;font-family:sans-serif}abbr,address,article,aside,audio,b,blockquote,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,hea（省略）
+html{font-family:sans-serif;-webkit-text-size-adjust:none}body{margin:0;padding:0;color:#333;background:#FFF;font-size:12px;font-family:sans-serif}abbr,address,article,aside,audio,b,blockquote,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,hea（省略）

After

そこで、ちょっとした工夫をしてみましょう。
同じ diff コマンドでも、下のように変更箇所がはっきりわかるようになります。

$ diff -u /tmp/base.pretty.css /tmp/head.pretty.css
--- /tmp/base.pretty.css        2015-10-01 12:09:46.178860000 +0900
+++ /tmp/head.pretty.css        2015-10-01 12:09:54.925860000 +0900
@@ -1026,7 +1026,7 @@

 @font-face {
     font-family: mixiIcon;
-    src: url(/static/fonts/icons/mixiIcon.eot?md5-by-cache-buster=6c0bbe4e29cc7106c21dc63d435ba599)
+    src: url(/static/fonts/icons/mixiIcon.eot?md5-by-cache-buster=e974b5a966dc1df146c49cc2f9596aac)
 }

 #page {

fontファイルの部分だけが変更されたことがすぐにわかるようになりました。

やり方

CSSの整形ツールをインストール

CSSの整形ツールであるcss-beautifyコマンドをインストールします。
次のコマンドを実行してください。

$ npm install -g js-beautify

css-beautify コマンドは次のように実行できます。
試しに適当な production.css を引数に実行してみてください。
きちんと整形されることが確認できるはずです。

$ css-beautify sample.production.css

production.cssを整形

次に、比較対象の production.css を css-beautify で整形します。
整形後の出力は、適当なファイルへと出力しておいてください。

$ css-beautify path/to/before.production.css > /tmp/before.css
$ css-beautify path/to/after.production.css > /tmp/after.css

diffで比較を実行

最後に、整形したCSS同士を比較します。

$ diff -u /tmp/before.css /tmp/after.css

応用例

コミット前の差分と比較する方法

$ diff -u <(git show HEAD:hoge.production.css | css-beautify -f -) <(css-beautify hoge.production.css | css-beautify)