YUI Compressor を使ってローカル環境で CSS を縮小化する
CSS の縮小化についての注意点が『ハイパフォーマンス Web サイト』P.85 に記述されていますが、細かいことを抜きにして YUI Compressor で CSS を縮小化する方法について書きます。
YUI Compressor はここからダウンロードできます。
使用方法は yuicompressor-2.4.2/doc/README の通り。 実行ファイルは yuicompressor-2.4.2/build/yuicompressor-2.4.2.jar です。
使用法: java -jar yuicompressor-2.4.2.jar [options] [input file] オプション -h, --help Displays this information --type <js|css> Specifies the type of the input file --charset <charset> Read the input file using <charset> --line-break <column> Insert a line break after the specified column number -v, --verbose Display informational messages and warnings -o 出力ファイル名 Place the output into <file>. Defaults to stdout. JavaScript 専用オプション --nomunge Minify only, do not obfuscate --preserve-semi Preserve all semicolons --disable-optimizations Disable all micro optimizations
CSS だけでなく、JavaScript も縮小できるため、JSMin の代わりにも使えます。
基本的な使用法は、CSS タイプと UTF-8 エンコーディングを指定して、以下のようになるでしょう。
java -jar yuicompressor-2.4.2.jar --type css --charset UTF-8 -o filename.min.css filename.css
ここでは、filename.css を filename.min.css に縮小しています。
私は、Xcode ビルド時に @import している CSS ファイルを統合した一時ファイルを作り、YUI Compressor で縮小するスクリプトを実行していますが、プラットフォーム依存性が強いコードなので、環境構築は各自でどうにかしてください。