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

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

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

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

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

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

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

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

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

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

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

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

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

参考サイト

Chromeでminify(ミニファイ)されたファイルをデバッグする

Chromeで、F12を押してデベロッパーツールを開きます。

右上に×ボタン(Close)の横の点の部分をクリックします。

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

「Settings」というのがあるので、それを選択します。

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

「Enable JavaScript source maps」にチェックを入れます。これでデバッグができるようになります。

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA