CSS を Minify (圧縮) する npm パッケージの Clean-CSS をコマンドラインで利用する「Clean-CSS-CLI」

CSS を圧縮する npm パッケージには色々あり、Gulp プラグインも色々ある。

いくつか比較して、今回は clean-css というパッケージを使おうと思ったが、どうやら最近コマンドラインツール部分と API 部分が分離されたらしく、まともな日本語文献がなかったので、調べたことを書いてみる。

clean-css と clean-css-cli

Clean-CSS は、Node.js 上で動かせる API 部分を持つ clean-css と、コマンドライン・インターフェースを提供する clean-css-cli とにパッケージが分割されている。割と最近分割されたらしく、以前は1つのパッケージでコマンドラインからの利用も Node.js での利用 (Gulp に挟んだりとか) もできていたみたい。

このあとインストールすると分かるが、clean-css-cli は中に clean-css を抱えているので、コマンドラインで利用する時は「clean-css-cli」だけインストールしてやれば良い。

Clean-CSS-CLI をインストールする

最初から丁寧に行こう。OS は Windows でも Mac OSX でも、どちらでも問題ない。Node.js と npm はインストールしておくこと。

# 適当なディレクトリを作り移動する
$ mkdir MinifyCSS
$ cd MinifyCSS

# 適当な CSS ファイルを作る。中身は適当に書いたことにしておく
$ touch src.css

# npm の初期設定を行う
$ npm init

# clean-css-cli をインストールし、package.json に記述させる
# ココではグローバルインストールにしてコマンドを叩けるようにしておくが、
# npm-scripts で使うのであればローカルインストールで良い
$ npm install -g clean-css-cli -D

ココまでが Clean-CSS-CLI のインストール。

Clean-CSS-CLI の基本的な使い方

Clean-CSS-CLI は「cleancss」コマンドにオプションを付けてあれこれ設定できる。

# バージョン表示
$ cleancss -v

# ヘルプ表示
$ cleancss -h

# src.css を初期設定で圧縮した結果をコマンドラインに出力する
$ cleancss src.css

大抵はコマンドライン上に結果出力しても意味ないので、以下のように -o オプション (--output) を指定し、出力ファイルを指定するのが基本であろう。

$ cleancss -o dist.css src.css

引数の順番は「出力するファイル名」「圧縮したいファイル名」の順であることに注意。これは、複数のファイルをまとめて1つのファイルに結合して圧縮できることから、この並び順であると覚えると良い。

# 複数のファイルを結合する場合
cleancss -o dist.css src1.css src2.css src3.css -d

-d オプションを付けると、圧縮前後のサイズなど、詳細を出力してくれる (--debug)。

サブディレクトリを指定しての読み込み・出力もできるが、出力先ディレクトリが存在しないとエラーになるので注意。

豊富なオプション

Clean-CSS には豊富なオプションがあり、圧縮の仕方をあれこれ設定できる。

消したくないコメント・コメント後の改行

Clean-CSS で Minify すると、コメントが削除される。しかし、/*! で始まるコメントはそのまま消されずに残る。

それは良いのだが、いざ圧縮してみると、コメント直後からコードが始まってしまい、少々見栄えが悪かったりする。

/*! たとえば
 * こんな風になる
 */body{font-size:100%;} ……

そこで、コメントの後ろに改行を入れるよう、Clean-CSS でオプション指定してみる。

$ cleancss -f 'breaks:afterComment=on' -o dist/Theme.css src/Theme.css

これで、コメントの後ろに改行が入る。

/*! たとえば
 * こんな風になる
 */
body{font-size:100%;} ……

-f オプションは --format の略。改行位置の指定やインデント設定、圧縮ではなく展開 (Beautify) もできるようである。書き間違えたりして無効なオプションになっていても無視されるだけでエラーにならないので、書式に注意。

互換性の設定

IE 向けのハックを含んだコードなど、互換性の設定を細かく指定することができる。

今回自分が書いていたコードははてなブログ用の CSS テーマで、スターハックなどを含んだ状態で圧縮させたかったので、以下のように設定した。

$ cleancss -c ie7 -o dist/Theme.css src/Theme.css

他にも様々なオプションがあるので、公式の README.md を見てみると良い。

こんなコマンドになりました

色々混ぜ込んだ結果、こういうコマンドに落ち着いた。

$ cleancss -c ie7 -f 'breaks:afterComment=on' -d -o dist/Theme.min.css src/Theme.css

さて、今回なぜコマンドラインであれこれやりたかったのかというと、Gulp を使わずに npm-scripts だけでビルド処理を行わせたかったからである。これを npm-scripts に組み込む話は次回にする。