PhpStorm 使用 Babel minify 自動壓縮Javascript檔案

7月 24, 2018

PhpStorm 使用 Babel minify 自動壓縮Javascript檔案

在現代網頁將Javascript壓縮成min.js檔已是常態，也是瀏覽器向網站獲取JS檔案在傳輸上有比較好的效率的手段之一，至於壓縮JS檔案有什麼好處呢？這裡有一文章寫的很詳細供大家參考（http://www.css88.com/archives/8396）

以下將介紹如何在PhpStorm上使用Babel-minify來自動壓縮成min.js，減少coding過程中特別花費額外的時間進行JS的壓縮的處理。

PhpStorm安裝
這裡我們就不多做描述了，因為PhpStorm在Windows或MacOS下的安裝方式都很輕鬆容易，Linux下如果是使用ubuntu 18.0.4或Fedora28較新的發行版本也不用擔心，只需要將.tar.gz的壓縮檔下載下來並解壓縮後，進入到該目錄下的bin目錄，會有一個phpstorm.sh，執行它並完成引導的步驟即可。
Babel-minify安裝
在安裝Babel-minify之前，我們先要安裝npm這個套件管理工具，透過這個工具可以讓我們輕鬆安裝Babel-minify或其他JS相關工具。（說穿了就一句話『我懶嘛~』）
- Windows和MacOS下安裝npm
  到Node.js下載頁面，可以依照自己的OS位元版本下載msi安裝檔。
- Linux下安裝npm
  如果是使用ubuntu 18.0.4可以在Terminal輸入下列指令：
  sudo apt-get install npm -y
  如果是使用Fedora28可以在Terminal輸入下列指令：
  
  sudo dnf install npm -y
  （事實證明了我真的很懶～）
安裝好了npm後，此時無論是Windows、MacOS、Linux都可以用命令提示字元或Terminal進行Babel-minify的安裝。

這時候只有一點需要注意，npm套件工具在進行任何工具安裝時，如果沒有加上全域參數，任何下載進行安裝的工具都會儲存在下達指令當下的目錄，如果下達指令時所在的目錄是c:\windows\system32，那下載下來的工具就會儲存在c:\windows\system32，MacOS和Linux也是一樣。

所以指令後面多加一個 -g，讓Babel-minify安裝在系統預設位置，這樣也比較容易找。

Windows安裝指令如下：
npm install babel-minify -g
MacOS和Linux安裝如下：

sudo npm install babel-minify -g
以上就完成了Babel-minify的安裝。
Babel-minify的安裝位置
打開Terminal或命令提示字元輸入

npm list babel-minify -g

記下路徑等等用的到
PHPSTORM設定
開啟專案後，點選File -> Settings 開啟這個專案的設定視窗

利用 Search bar 找出 File Watchers

按下右側的 + 選擇 YUI Compressor JS

將 Name 改成自己想要的視別名稱，譬如：Babel-minify

將 Program 改成剛才查到的 Babel-minify 的安裝路徑，請注意！

Linux請選用這個路徑下的 minify ，Windows則選用這個路徑下的 minify.cmd

將 Arguments 和 Output paths to refresh 改成自己期望輸出的路徑，譬如下圖紅線的路徑

將Arguments

$FileName$ -o $FileNameWithoutExtension$.min.js

改成

$FileName$ -o C:\Users\Michael\Documents\PHP_Project\NARI_Model\public\js\$FileNameWithoutExtension$.min.js

將Output paths to refresh

$FileNameWithoutExtension$.min.js

改成

C:\Users\Michael\Documents\PHP_Project\NARI_Model\public\js\$FileNameWithoutExtension$.min.js

還不用急著儲存，因為有個 Scope 還沒有改，在預設的情況下是監控整個Project下JS進行輸出的行為，但是我個人比較偏好的設定是各別指定監控 (才不會發生自作聰明的行為)

點擊 Scope 右側的按鈕，開啟 Scope 的設定視窗，再點擊 Scopes 左上方的 + 選擇 Local

將 Name 改成自己想要的視別名稱

選擇想要監控的JS並按下Include，再按下OK完成設定。
如果想要一次監控多個JS並輸出成壓縮後的JS，可多選之後按下Include即可。