linuxBean14.04(128)Closure StylesheetsでCSSを圧縮する

2016-07-26

旧ブログ

t f B! P L
linuxBean14.04(126)Closure CompilerでJavaScriptを圧縮すると同系統のツールでCSSの圧縮する

前の関連記事:linuxBean14.04(127)NetBeansプロジェクトをGitHubリポジトリにアップロードする


Closure Stylesheetsのインストール


Releases · google/closure-stylesheetsから1.2.0の closure-stylesheets.jarをダウンロードして、linuxBean14.04(126)Closure CompilerでJavaScriptを圧縮すると同じフォルダ~/closure-compilerに入れました。

これもClosure Compilerと同様にjava実行環境が必要です。

java -jar closure-stylesheets.jar --help

これでヘルプが表示されるはずですが動きません。
pq@HP6730b1:~/closure-compiler$ java -version
java version "1.7.0_101"
OpenJDK Runtime Environment (IcedTea 2.6.6) (7u101-2.6.6-0ubuntu0.14.04.1)
OpenJDK Server VM (build 24.95-b01, mixed mode)
pq@HP6730b1:~/closure-compiler$ java -jar closure-stylesheets.jar --help
Exception in thread "main" java.lang.UnsupportedClassVersionError: com/google/common/css/compiler/commandline/ClosureCommandLineCompiler : Unsupported major.minor version 52.0
    at java.lang.ClassLoader.defineClass1(Native Method)
    at java.lang.ClassLoader.defineClass(ClassLoader.java:803)
    at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142)
    at java.net.URLClassLoader.defineClass(URLClassLoader.java:449)
    at java.net.URLClassLoader.access$100(URLClassLoader.java:71)
    at java.net.URLClassLoader$1.run(URLClassLoader.java:361)
    at java.net.URLClassLoader$1.run(URLClassLoader.java:355)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(URLClassLoader.java:354)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:425)
    at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:308)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:358)
    at sun.launcher.LauncherHelper.checkAndLoadMain(LauncherHelper.java:482)
1.1.0も同様に動きませんでしたが1.0.0は動きました。

Javaのことはよくわからないので1.0.0以外が動かない理由はよくわかりませんでした。

Closure StylesheetsでCSSを圧縮する


関数や変数が使えるようですが、とりあえずいまは完成したCSSを圧縮したいだけなのでMinificationの機能を使います。

java -jar closure-stylesheets.jar input1.css input2.css input3.css > output.css

この形式で圧縮できます。

Blogger:ページ番号付ページナビ(7)複数表示とモバイルサイトへの対応で作成したpagenavi.cssを圧縮してみます。

java -jar ~/closure-compiler/closure-stylesheets.jar pagenavi.css > pagenavi.min.css
pq@HP6730b1:~/NetBeansProjects/PageNavi_Blogger/public_html$ java -jar ~/closure-compiler/closure-stylesheets.jar pagenavi.css > pagenavi.min.css
-khtml-border-radius is an unrecognized property in pagenavi.css at line 16 column 6:
     -khtml-border-radius: 2px;
     ^

1 error(s), 0 warning(s)
エラーを指摘されました。

kを削れば解決すると思ったのですが解決しませんでした。

khtmlというのはKonqueror - Wikipediaというブラウザへの対応のためのようです。(css - Is the khtml prefix necessary? - Stack Overflow)

もうkhtmlの行をコメントアウトしたらうまくいきました。

 1479バイトが1436バイトに圧縮できました。

この程度の圧縮ならば、容量削減のメリットよりも可読性が落ちるデメリットの方が大きいような気もしましたが、ChromiumのデベロッパーツールのFormatで元に戻せたのでよしとします。

NetBeans8.1で元に戻す方法はわかりませんでした。

参考にしたサイト


Releases · google/closure-stylesheets
Closure Stylesheetsのダウンロードサイト。1.0.0しか動きませんでした。

google/closure-stylesheets: A CSS+ transpiler that lints, optimizes, and I18n-izes
Closure Stylesheetsのサイト。

Closure Stylesheets で CSS を最適化する (1) - WebOS Goodies
Closure Stylesheetsの日本語の解説。

Konqueror - Wikipedia
WebKitのフォーク元のKHTMLをエンジンとするウェブブラウザ。

css - Is the khtml prefix necessary? - Stack Overflow
khtmlプレフィックスはClosure Stylesheetsではエラーになりました。

ブログ検索 by Blogger

Translate

最近のコメント

Created by Calendar Gadget

QooQ