phpstorm 壓縮 JS

同樣可以壓縮css

1. 目錄

• 需要的軟體
• 配置
• 執行
• 常見錯誤

2. 需要的軟體

• phpstorm 或者 webstorm
• java 環境
  • 下載地址
  • 記得設定環境變數-window的話會自動設定的
• yuicompressor-2.4.8.jar 其中一個版本即可
  • github地址

安裝就自行解決咯

3. 配置

看到上面的 【external tool】和【file watchers】了嗎？區別在於前者相當於一個快捷命令，點選才會去壓縮；後者是監聽專案每一個檔案的變化，自動壓縮。我們以前者為例進行配置！！後者讀者可以自行配置

3.1 新增external Tool

• +按鈕進行新增命令
  

其中紅框3個是需要注意的引數配置。Program,Arguments,Working directory

• Program 是 安裝java的時候的javaw的路徑。比如 E:\Program Files\java\jre1.8\bin\javaw.exe, Mac的話直接使用java即可
• Arguments 就是執行這個javaw.exe程式的引數:
  • 這個需要填寫剛才下載的 yuicompressor-2.4.8.jar 全路徑，記得如果目錄有空格就新增雙引號 "yuicompressor-2.4.8.jar的 全路徑"

    -jar
    "E:\Program Files\JetBrains\PhpStorm 2017.3.6\ext\yuicompressor-2.4.8.jar"
    $FileName$
    -o
    $FileNameWithoutExtension$.min.js

• Working directory 比如 ： $FileDir$ 表示當前檔案的所在目錄
  • 這個是執行命令的目錄，記得這個是目錄。

對於想要使用其他配置引數的可以直接使用搜尋引擎。但是這裡給一下常用的引數吧：

• $FileName$ 是指不帶路徑帶有副檔名的檔名
• $FileNameWithoutExtension$ 不帶路徑也不帶副檔名的檔名
• $FileDir$ 當前檔案坐在目錄
• $FileParentDir$ 當前檔案上一級目錄
• $SelectedText$ 當前選擇的文字內容
• $ProjectFileDir$ 當前專案路徑

然後配置這個命令的名稱，描述即可，點選儲存。

4. 執行

1. 選單欄上有一個Tools -> External Tools -> 你剛才定義的名稱
2. 或者在檔案內部右鍵也可以看到
3. 如果沒有報錯就可以看到相應路徑有一個壓縮檔案

5. 常見錯誤

可能會出現一個叫 invalid property id的錯誤資訊。也會報告具體是哪一行的錯誤。

我遇到的程式碼錯誤是：第二行：invalid property id

$scope.isNew = {
    true:'isnew'
};

看了之後並沒有一個叫id的屬性，是真的錯了嗎？是的，錯了，雖然實際執行起來沒問題。

修改一下即可，原因是這個物件的鍵名不能為 布林值，容易造成混淆

$scope.isNew = {
    1:'isnew'
};

比如還會造成一個錯的是壓縮CSS的時候：

.className{
    float: "left"
}

看上去沒問題，但是仍然會出現上面的錯誤。因為float是JS上浮點數的關鍵字，這裡容易造成混淆了，所以：

.className{
    "float": "left"
}

這樣就好了

phpStorm該配置官方文件