node.jsでminify(ミニファイ)するuglify-jsの使い方とminify(ミニファイ)されたソースのデバッグ方法

node.jsでminify(ミニファイ)するuglify-jsの使い方とminify(ミニファイ)されたソースのデバッグ方法
1. Chromeでminify(ミニファイ)されたファイルをデバッグする
2. 関連

node.jsでminify(ミニファイ)するuglify-jsの使い方とminify(ミニファイ)されたソースのデバッグ方法

node.jsのアプリケーションでファイルをバンドルしたら、次はminify(ミニファイ)すると思います。

minify(ミニファイ)とは、js内の余計な改行、コメント、空白を取り除いてファイル圧縮することを言います。

まずminify(ミニファイ)してくれるuglify-jsモジュールをインストールします。※私はuglify-jsはアグリファイと呼んでいます。

npm install uglify-js -g

minify(ミニファイ)されたファイルを見た事がある人はわかると思いますが、中身を見ても全くソースが追えません。ですが、uglify-jsでminify(ミニファイ)する際にソースマップを指定してあげれば、minify(ミニファイ)する前のjsソースで、ブラウザのソースマップを使用してデバッグなどすることが可能です。

以下のコマンドでminify(ミニファイ)します。

uglifyjs .\dist\bundle.js -c --source-map --output .\dist\bundle.min.js

uglifyjsの次に圧縮したいファイルを指定してから-cオプションを指定します。逆だとうまくいきませんでした。

オプション	意味
-c	圧縮する(compress)
-o(–output)	出力するファイル名
–source-map	ソースマップファイルを出力する

以下の構成でファイルが作成されます。

distディレクトリ
  bundle.js
  bundle.min.js
  bundle.min.js.map

htmlファイルからminify(ミニファイ)されたファイルを読み込んでみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>uglifyjs test</title>
</head>
<body>
<script type="text/javascript" src=".\dist\bundle.min.js"></script>
</body>
</html>

ブラウザで表示すると以下のように正常に表示されることがわかります。