Mac PhpStorm 設定 YUI Compressor 壓縮 CSS 與 Javascript 檔案

日期：
PhpStorm 是 PHP 語言的整合開發環境 (IDE, Integrated development environment)。透過安裝 YUI Compressor 可以壓縮 CSS 與 Javascript 的檔案大小。



PhpStorm 網站上有說明文件：Minifying CSS、Minifying JavaScript，以下補充在 Mac 設定的細節。

更新：Javascript 壓縮部分，請見 UglifyJs 壓縮 JavaScript 遇到錯誤 Unexpected token: operator «>»

Mac 上 YUI Compressor 安裝步驟

1. 打開終端機 (Terminal) 安裝 Homebrew 套件管理工具

安裝完可以輸入指令 brew -v 確認完成安裝，範例結果：
$ brew -v
Homebrew 2.2.11
Homebrew/homebrew-core (git revision d3ae1; last commit 2020-04-03)

2.  請到 Java SE Development Kit 14 - Downloads 下載與安裝 JDK (Java Development Kit)。

安裝完可以輸入指令 javac -version 確認完成安裝，範例結果：
$ javac -version
javac 14

3. 輸入 brew update

4. 輸入 brew install node 安裝 Node,js

安裝完可以輸入指令 node -v 確認完成安裝，範例結果：
$  node -v
v13.12.0
5. 輸入 npm install -g yuicompressor 安裝 YUI Compressor
安裝完成顯示訊息
/usr/local/bin/yuicompressor -> /usr/local/lib/node_modules/yuicompressor/nodejs/cli.js
+ yuicompressor@2.4.8
added 1 package from 4 contributors in 3.802s
6. 切換到 PhpStorm 的偏好設定


7. 確認 File Watchers 的 plugin 已經啟用


8. 在 Tools -> File Watchers 的設定目前是空白的

按一下 + 符號

9. Choose Template 選項中選擇 YUI Compressor CSS 可壓縮 CSS 檔案、若選擇 YUI Compressor JS 可壓縮 Javascript 檔案

10. New Watcher 視窗可以看到 Program 也就是 YUI Compressor 的路徑：
預設值是 yuicompressor 按 ok 按鈕即可完成設定

因為安裝 yuicompressor 已經設定好系統路徑，就不一定要依照網站文件說要改成設定 yuicompressor-<version>.jar 的路徑。如果要設定成 yuicompressor-<version>.jar 的路徑，則可能因為版本號不同路徑，例如 /usr/local/lib/node_modules/yuicompressor/build/yuicompressor-2.4.8.jar

確認路徑設定，可以輸入
$ yuicompressor -V
2.4.8
$ java -jar /usr/local/lib/node_modules/yuicompressor/build/yuicompressor-2.4.8.jar -V
2.4.8 

這時候修改任意 CSS 或 Javascript 檔案，就可以順利產生壓縮的檔案


技術問題排除

1. 修改任意 CSS 或 Javascript 檔案，原本預期會額外產生壓縮的檔案，卻遇到「必須安裝 JDK」錯誤訊息。請到 Java SE Development Kit 14 - Downloads 下載與安裝 JDK。
2. 不清楚 yuicompressor-<version>.jar 的路徑

留言

張貼留言