別ファイルにした css や Javascript を minify する

 サーバへのトラフィックを削減するために、別ファイルにした css ファイルや js ファイルは、サイズを小さくしたほうがいいです。ただ、zip などのようにバイナリで圧縮するわけではありません。css や Javascript の文法に則り、サイズを小さくするのです。

 例えば、両方共、改行はなくてもいいので、改行を削除したり、余分な空白を削除したりするのです。この様にサイズを最小にすることを、minify といいます。

 minify する web サービスもありますが、コマンドラインのツールを探してみました。

CSS を minify する cleancss

 改行や空白を削除するだけではなく、色の指定も、RGB を色名にしてサイズを小さくしたりしてくれます。編集しやすい形で css を作成したものを、minify した結果を出力してくれます。

 インストールします。nodejs なども必要です。一緒にインストールします。

$ sudo apt-get install -y cleancss
・
・

 引数にエディタなどで作成した css ファイルだけを指定すれば、標準出力に結果を表示します。

$ cleancss sites.txt
・
・

 指定ファイルに保存するには -o オプションを使います。

$ cleancss sites.txt -o sites.css

Javascript を minify する uglifyjs

 これもインストールします。

$ sudo apt-get install -y uglifyjs
・
・

 使い方は cleancss とほぼ同じです。

$ uglifyjs functons.txt -o functions.js

 zip などの圧縮に比べると、それほどサイズは減りませんが、塵も積もれば・・・なので、やらないよりやったほうがいいでしょう。

web サイト

Posted by sirius