linuxBean14.04(126)Closure CompilerでJavaScriptを圧縮する

CSSやJavaSciptの圧縮にはBlogger:圧縮ツールを使ってCSSとJavaScriptを圧縮するのツールを使ってきましたが、ソースマップも出力したいのでClosure Compilerを導入することにしました。最初はlinuxBean14.04(122)NetBeans8.1でSyntaxHighlighter v4のビルドで使われているwebpackを使おうと思いましたが、まだこれからも変化していきそうな勢いの進歩なのでもう少し様子みることにしました。

前の関連記事：linuxBean14.04(125)Bloggerで使うJavaScriptの開発環境:その2

Closure Compiler Applicationのインストール

Getting Started with the Closure Compiler Application  |  Closure Compiler  |  Google Developers

インストールは簡単です。

このページのインストールのところにあるリンクからcompiler-latest.zipをダウンロードして展開してでてきたファイルをclosure-compilerという名前のフォルダに入れます。

closure-compiler-v20160713.jarというファイル名をcompiler.jarに改名します。

これでインストール完了です。

今回はclosure-compilerフォルダをホームフォルダに入れました。

起動にはjava実行環境が必要です。

今回はOpenJDK7を使いました。

pq@pq-VirtualBox:~/closure-compiler$ java -version
java version "1.7.0_95"
OpenJDK Runtime Environment (IcedTea 2.6.4) (7u95-2.6.4-0ubuntu0.14.04.2)
OpenJDK Client VM (build 24.95-b01, mixed mode, sharing)
pq@pq-VirtualBox:~/closure-compiler$ java -jar compiler.jar --version
Closure Compiler (http://github.com/google/closure-compiler)
Version: v20160713
Built on: 2016-07-14 11:26
pq@pq-VirtualBox:~/closure-compiler$ java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

先ほどのページにあったhello.jsのコンパイルができました。

compiler.jarのバージョンはv20160713になっていました。

java -jar ~/closure-compiler/compiler.jar  --help

これでコマンドラインオプションが見れます。

pagenavi.jsをコンパイルする

Blogger:ページ番号付ページナビ(6)モジュール化してグローバル関数を除去するで作成したpagenavi.jsをソースマップをつけてコンパイルします。

java -jar ~/closure-compiler/compiler.jar --js pagenavi.js --create_source_map pagenavi.js.map --js_output_file pagenavi.min.js

java -jar ~/closure-compiler/compiler.jar --js 入力ファイル名--create_source_map ソースマップファイル名 --js_output_file 出力ファイル名

コマンドはこの形式になっており今回は入力ファイル名:pagenavi.js、ソースマップファイル名:pagenavi.js.map、出力ファイル名:pagenavi.min.jsにしました。

linuxBean14.04(125)Bloggerで使うJavaScriptの開発環境:その2で作成したテストブログのリンクを以下のように変更しました。

<script src="http://localhost:8383/PageNavi/pagenavi.min.js" type="text/javascript"></script>

これでpagenavi.min.jsでも動きました。

pagenavi.min.js

さらに圧縮する --compilation_level ADVANCED_OPTIMIZATIONS オプションをつけて圧縮してみましたがこれは動きませんでした。

pagenavi.min.js

モジュール名PageNavi_Bloggerがｑに圧縮されてしまってボタンから呼び出す関数が同定できなくなったのが原因です。

デフォルトの圧縮率でも10.5KiBが2.5KiBまで圧縮されています。

--compilation_level ADVANCED_OPTIMIZATIONS オプションをつけても2.2KiBだったのでデフォルトの圧縮との著明な差はでませんでした。

ということデフォルトの圧縮率SIMPLEを使うことにしました。

ソースマップファイルを使って圧縮したjsファイルのソースでデバッグする

pagenavi.min.jsを使っているページをChromiumで表示させて右クリック→検証。

Sourcesタブでpagenavi.min.jsを表示させます。

今回はpagenavi.min.jsはlocalhost:8383にあります。

pagenavi.min.jsで右クリック→Add Source map。

ここにマップファイルのURLを入力します。

今回はpagenavi.min.jsと同じフォルダにおいてあるのでURLは次のようになります。

http://localhost:8383/PageNavi/pagenavi.js.map


これを入力してAddボタンをクリックします。

これでpagenavi.jsファイルがSourcesタブに表示されるようになり、そのファイルでブレークできるようになります。

参考にしたサイト

【意訳】Webpackの混乱ポイント - Qiita
Webpackの解説。

Getting Started with the Closure Compiler Application  |  Closure Compiler  |  Google Developers
Closure Compiler Applicationのインストール方法。

Closure Compiler Application - Closure Compilerを使う！ | @wiki
Closure Compiler Applicationのオプションの日本語の解説。

次の関連記事:linuxBean14.04(127)NetBeansプロジェクトをGitHubリポジトリにアップロードする