読者です 読者をやめる 読者になる 読者になる

closure-stylesheetsでcss compress

cssのcompressしようかな、と。
googleclosure-stylesheets - Closure Stylesheets - Google Project Hosting 使います。

download

Downloads - closure-stylesheets - Closure Stylesheets - Google Project Hosting
ここから最新版落としてきます。
http://closure-stylesheets.googlecode.com/files/closure-stylesheets-20111230.jar

wget http://closure-stylesheets.googlecode.com/files/closure-stylesheets-20111230.jar
mv closure-stylesheets-20111230.jar closure-stylesheets.jar

やってみる

javaが入ってれば、一応そのままで使えます。

java -jar closure-stylesheets.jar --help


cssを引数で渡します

java -jar closure-stylesheets.jar style.css


そのままだと、標準出力に出力するんで、output file nameを指定

java -jar closure-stylesheets.jar style.css --output-file compressed_style.css

エラーとか

何個かエラーで弾かれたので、メモとして。


cssの文法間違いがあると、parse errでこけます。

Compiler parsing error: Parse error in style.css at line 553 column 1:
}
^


charset書いてると、removeせえ、って言われますね

@charset removed in style.css at line 1 column 1:
@charset "UTF-8";
^


ios専用のpropertyなんかもエラーでます。

tap-highlight-color is an unrecognized property in style.css at line 41 column 1:
tap-highlight-color:rgba(65,152,195,0.6);
^

これは回避方法分からなかった。あとで調べる
※追記
分かった。

    • allowed-unrecognized-properties と --allowed-unrecognized-property が用意されているっぽい。
    • allowed-unrecognized-property propery名 ってoption付ければ、エラーなく出力されます。

複数渡したい時は、--allowed-unrecognized-properties を使うのかな?

java -jar closure-stylesheets.jar style.css --allowed-unrecognized-property tap-highlight-color --output-file compressed_style.css


重複。クロスブラウザ対応などで同じ属性を重複して書かないと行けない場合、エラーでちゃいます。

Detected multiple identical, non-alternate declarations in the same ruleset. If this is intentional please use the /* @alternate */ annotation. background-image:[-moz-linear-gradient(top,#94d6ec,#7bc7e0)] in style.css at line 68 column 1:
}
^

メッセージにあるように、こういうエラーを抑制する、@alternate という記述があるので、それを利用しましょう。