JS、CSSをminifyで軽量化、難読化できるオススメツールUglifyJS、clean-cssのインストール、利用方法

WEBサイトや、WEBアプリケーションを開発するときに、Javascirptとか、CSSも、もちろん使いますよね？そんなJavasciprtとか、CSSをそのまま使うのも良いのですが、ファイルサイズが大きくなったりすると、ブラウザでの読み込みが遅くなったり、そもそも開発したコード等を見せたくない場合などありますよね？そんなときに、ファイルサイズの圧縮や、難読化が出来るツールの使用方法のご紹介となります。
この記事でご紹介するのは、UglifyJS、clean-css になります。

UglifyJS

UglifyJSとは

UglifyJSは、node.js で利用できるツールです。利用にはnode.jsのインストールが必要になります。
機能としては、プレーンなJavasciprtを圧縮、難読化することができます。また、オプションによっては、javacript内の console.log や、 console.group などの記述の削除も行うことができます。
開発などでは、デバックようにconsole.log などでコンソールにログ等を出力してたりすると思いますが、本番環境では不要、出したくないと思うので、このツール使うことで除去することができます。
UglifyJSの公式ドキュメントはこちら。

UglifyJSのインストール

node.jsがインストールされていれば、npm が使用できると思うので、以下のコマンドでインストールすることができます。node.jsのインストールは、こちらを参考にしてください。node.jsの本家。

> npm install -g uglify-js

インストールが終わったら、以下のコマンドでバージョンが見れれば成功です。

> uglifyjs -v
uglify-js 3.13.1

UglifyJSの利用方法（圧縮・難読化）

javascriptのファイルの圧縮・難読化するためのコマンドが以下になります。
<input js file>：圧縮・難読化前のjavascriptファイル
<js.min file>： 圧縮・難読化後のjavascriptファイル （xxxx.js だった場合は、 xxxx.min.jsなど）

> uglifyjs <input js file> --compress drop_console=true --mangle -o <js.min file>

UglifyJSの使用例

UglifyJS使用前のJavasciprt

window.onload = function() {
  setInterval(function() {
    var dd = new Date();
    document.getElementById("T1").innerHTML = dd.toLocaleString();
    console.group();
    console.log("==================================");
    console.log(dd.toLocaleString());
    console.log("==================================");
    console.groupEnd();
  }, 1000);
}

UglifyJS使用後のJavasciprt

window.onload=function(){setInterval(function(){var n=new Date;document.getElementById("T1").innerHTML=n.toLocaleString()},1e3)};

UglifyJSをかけた後のJSを見ると、console系の処理が無くなってますね。また、変数名なども変わっており、改行もなくなってます。結構変わってますが、処理結果に変わりはありませんのでご安心を。

clean-css

clean-css とは

UglifyJSは、node.js で利用できるツールです。利用にはnode.jsのインストールが必要になります。
機能としては、プレーンなcssを圧縮、難読化することができます。
開発中は、コメントや、CSS内で改行などが無いと見づらくて効率が悪いと思いますが、本番環境では不要、他の人に見られたくない（恥ずかしい）と思うので、このツール使うことで圧縮・難読化することができます。
clean-cssの公式ドキュメントはこちら。

clean-css のインストール

node.jsがインストールされていれば、npm が使用できると思うので、以下のコマンドでインストールすることができます。node.jsのインストールは、こちらを参考にしてください。node.jsの本家。

> npm install clean-css-cli -g

インストールが終わったら、以下のコマンドでバージョンが見れれば成功です。

> cleancss -v
5.2.1

clean-css の利用方法 （圧縮・難読化）

<input css file>：圧縮・難読化前のcssファイル
<out css file>： 圧縮・難読化後のcssファイル （xxxx.cssだった場合は、 xxxx.min.cssなど）

> cleancss <input css file> > <out css file>

clean-css の使用例

clean-css 使用前のcss

/*ボックスデザインのCSS*/
.box6 {
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #f0f7ff;
    border: dashed 2px #5b8bd0;/*点線*/
}
.box6 p {
    margin: 0;
    padding: 0;
}

clean-css 使用後のcss

.box6{padding:.5em 1em;margin:2em 0;background:#f0f7ff;border:dashed 2px #5b8bd0}.box6 p{margin:0;padding:0}

それでは、良い開発ライフを！！

関連記事:

無料のSSL証明書 Let’s Encrypt 設定・更新方法