JavaScriptであるJSファイルは圧縮(minify)したほうメリットが多いです。
ファイルサイズが減ってページの読み込み速度も改善してユーザーにも優しく、難読化の効果もあるのでセキュリティも少しだけ上がります。
ただエンジニア的には圧縮したJSファイルをそのまま編集するのは難しくて、編集のたびに圧縮したJSファイルを生成するのは面倒です。
そんな面倒な作業も PhpStorm を使うと、忘れることなく自動的に JavaScript を圧縮してJSファイル（minifyファイル）を生成してくれるので快適になります。
この記事では、PhpStormとGoogleの「Closure Compiler」を使って、自動で圧縮する(minify)方法を紹介します。
javaをインストールする
開発用のjava をインストールしておきます。
インストールされているかの動作確認は「java -version」でバージョンが表示されればOKです。
C:\Users>java -version java version "1.8.0_191" Java(TM) SE Runtime Environment (build 1.8.0_191-b12) Java HotSpot(TM) 64-Bit Server VM (build 25.191-b12, mixed mode)
圧縮ソフトの「Closure Compiler」をインストールする
Google Closure Compilerは、Google公式サイトのこのページからダウンロードします。
「Closure Compiler」は圧縮ファイルを解凍してjarファイルを配置するだけです。
今回はこの位置にjarファイルを配置しました。
D:\soft\compiler-latest\
ファイルサイズも8MBほどなので容量を気にしないで大丈夫です。
「Closure Compiler」が動作するか確認する
「Closure Compiler」が動作するかは、まずヘルプが表示されるかで簡単にわかります。
java -jar D:\soft\compiler-latest\closure-compiler-v20181125.jar --help
下のように表示されれば、まずは大丈夫です。
ヘルプが表示できたら、試しに適当なJavaScriptファイルを圧縮してみます。
シンプルなコマンドで圧縮できるか動作を確認します。
java -jar D:\soft\compiler-latest\closure-compiler-v20181125.jar --js D:\soft\compiler-latest\main.js --js_output_file D:\soft\compiler-latest\main.min.js
PhpStormで開発中の圧縮する対象のJSファイルを登録する
PhpStormのスコープの機能を使って、自動で圧縮するJavaScriptファイルを指定します。
「外観 & 振る舞い(Appearance&Behavior) > 設定 > スコープ」を開いて「＋」ボタンを押します。
「＋」ボタンを押して、「ローカル」を選択してスコープを追加します。
スコープの名前を入力します。分かりやすい名前にしておくと良いと思います。
中央部分にプロジェクトのディレクトリが表示されているので、ファイルを編集・保存時に自動的に圧縮したいJavaScriptファイルを指定します。
ファイルを個別に指定、ディレクトリ単位で指定することもできるようです。
ディレクトリかファイルを選択して右側の「包含」ボタンで設定できます。
パターンにファイルなどが入力され、ファイルの色も変わります。
指定が終わったら右下の「適用」ボタンで保存します。
JSファイル更新時に自動圧縮するように設定する
設定画面の「ツール > ファイル監視」を開きます。
右側の「＋」ボタンで設定を追加します。
テンプレートの選択で「Closure Compiler」を選びます。
「新規ウォッチャー」画面が表示されるので、真ん中のプログラムにダウンロードした「Closure Compiler」のjarのファイルパスを指定します。
今回は「D:\soft\compiler-latest\closure-compiler-v20181125.jar」を指定しました。
その下の「引数」で圧縮レベルなどのパラメーターを指定できるようです。
次に自動圧縮したいファイルを指定します。
スコープと書いてある箇所の右側の「…」ボタンをクリックしてスコープを指定します。
スコープのダイアログが表示されるので、先程作成したスコープを選択して、「OK」ボタンをクリックします。
スコープ欄に選択したスコープ名が表示されていればOKです。
下にある「OK」ボタンをクリックして設定を保存します。
「ファイル監視」画面に戻って追加されていれば、設定OKです。
チェックボックスからチェックを外せば設定のON/OFFを簡単に切り替えられます。
スコープで指定したJavaScriptファイルを編集し、保存して圧縮されたminファイルが作成されていれば、完璧です。
PhpStormのプロジェクトファイル一覧には下のようにJavaScriptファイルの下階層にminファイルが表示されます。
終わりに。
最終的にJavaScriptファイルを圧縮するなら、編集して保存する時に自動的に圧縮する仕組みを作っておくと作業がはかどります。
シェルやバッチで簡単に圧縮もできますがエディターと連携させるほうが、幸せになれる気がします。
開発環境によってはデプロイする時に圧縮する仕組みだと不要だったりしますが。。。
PhpStormのファイル監視機能が応用が効きそうな機能なので自動圧縮以外にも色々使えます。
コメント