最近做項目遇到一個要求，就是把本地的 js 和 css 進行壓縮后再上線，由於之前項目並沒有使用 webpack 之類的庫，項目上也因為一些機密不能在線上壓縮，這無疑給代碼打包壓縮帶來了很大麻煩，於是上網搜索了一些代碼壓縮的方法，最終鎖定了第三方插件 yuicompressor-2.4.8.jar，因為后台發開用的語言是 java，代碼工具是 IntelliJ IDEA，前端開發使用的代碼工具是 WebStorm，而 yuicompressor-2.4.8.jar 兩者都可以兼容，所以果斷選擇。
關於 yuicompressor-2.4.8.jar 的配置網上有很多教程，在這里我借鑒了 https://blog.csdn.net/ke_g3/article/details/84763515 的安裝過程，完全可以運行，但是令人遺憾的是這個方法只能處理單個 js 或者 css 文件，對於項目里 js 和 css 比較少的尚且可以接受，但是對於大批量的 js 和 css 文件來說簡直是無法忍受，於是就開始了此次 本地批量壓縮混淆 js , css 代碼 的旅程。
對於將 yuicompressor-2.4.8.jar 作為第三方插件植入 IDEA 或者 WebStorm ，然后運行該插件其實運用了以下這行代碼：
java -jar jar存放目錄/yuicompressor-2.4.8.jar --type js --charset utf-8 目錄/XXX.js -o '.js$:.min.js'
上面的代碼就是將一個特定的 js 文件代碼壓縮，那我們就可以順藤摸瓜，利用該命令實現一個批量壓縮代碼的腳本。
直接上代碼：
1 #腳本解釋器 2 #!/bin/bash 3 #執行方法 4 function getdir(){ 5 #循環當前目錄 6 for file in `ls $1` 7 do 8 #拼接 9 dir_or_file=$1"/"$file 10 #判斷是目錄還是文件 11 if [ -d $dir_or_file ] 12 then 13 #如果是目錄遞歸執行方法 14 getdir $dir_or_file 15 else 16 #如果是文件則進行壓縮 17 compress $dir_or_file 18 fi 19 done 20 } 21 #執行壓縮 22 function compress(){ 23 #判斷 js 文件且不是 min.js ， .js 壓縮的 min.js 會覆蓋原有的 min.js 24 if [[ $dir_or_file == *.js ]] && [[ $dir_or_file != *.min.js ]] 25 then 26 #壓縮 js 27 java -jar /Applications/IntelliJ" "IDEA.app/Contents/lib/yuicompressor-2.4.8.jar --type js --charset utf-8 $dir_or_file -o '.js$:.min.js' 28 #判斷 css 文件且不是 min.css ， .css 壓縮的 min.css 會覆蓋原有的 min.css 29 elif [[ $dir_or_file == *.css ]] && [[ $dir_or_file != *.min.css ]] 30 then 31 #壓縮 css 32 java -jar /Applications/IntelliJ" "IDEA.app/Contents/lib/yuicompressor-2.4.8.jar --type css --charset utf-8 $dir_or_file -o '.css$:.min.css' 33 fi 34 } 35 #先刪除帶 min 的壓縮文件 此處由於可能只有 min.js 而沒有它的 js 文件，所以棄用 36 #rm `find . -name "*.min.js"` 37 #rm `find . -name "*.min.css"` 38 #進入目錄 39 root_dir="." 40 getdir $root_dir
上面的代碼說白了就是運行在終端之后將目標目錄內的 js 和 css 文件進行查找並進行壓縮。由於本人使用的是 mac 做的開發，所以並沒有考慮 windows 的執行命令，這個大家都懂的。當然上面的命令是基於 shell 命令寫的，可以運行 shell 的也可以使用。使用 windows 的小伙伴代碼把上面的代碼解釋說明一下后可以自己修改一下運行。
1、我們的思路就是先找到需要壓縮代碼的目錄，然后將該目錄下的 js 和 css 代碼壓縮，如果該目錄還有目錄，那么就遞歸再次執行壓縮操作。
2、首先定義壓縮目錄 root_dir，在這里我是直接 cd 到壓縮目錄下執行，所以是 "."，然后執行 getdir() 方法並將 root_dir 參數傳入進行目錄查找。
3、然后我們對傳入的 toot_dir 目錄進行循環遍歷，對該級目錄，即傳入的 root_dir = "." 進行判斷，如果是目錄的話我們再次執行 getdir() 方法進行循環操作，如果是文件的話就進入 compress() 方法，並將該文件作為參數傳入。
4、在 compress() 方法里我們先對傳入的參數進行判斷，如果是以 .js 文件結尾的且不是以 min.js 結尾的，運行
java -jar jar存放目錄/yuicompressor-2.4.8.jar --type js --charset utf-8 $dir_or_file -o '.js$:.min.js'
這樣就可以將 js 文件代碼進行壓縮了，css 文件同理。
后語：在編寫代碼進行測試時，自己在本地建了一個 test 目錄進行測試，里面放了一些 js 和 css 文件，然后進行第一次代碼壓縮，當時並沒有在 compress() 方法里進行 .min.js 和 .min.css 的判斷。然后進行第二次壓縮，發現原有的 js 文件壓縮的 min.js 會覆蓋掉第一次壓縮出來 min.js，但是第一次壓縮出來的 min.js 也會壓縮出來一份 min.min.js，由於向省懶勁就直接在進行壓縮之前先刪除掉文件內所有的 min.js 和 min.css，拿給項目的人用，結果傻眼了。因為開發人員在之前引入了好多第三方 js 和 css 庫，但是引入的只是 min.js 和 min.css，結果刪了之后有沒有它的沒壓縮過的文件，整個項目崩潰了，只好再把項目代碼回滾了一下，很是尷尬。所以還是不要偷懶，代碼邏輯考慮詳細點。
最后我們看一下效果：
1、先通過代碼編輯器打開一個需要壓縮代碼的項目，這里我們在 test 目錄下又創建了一個 nextDir 目錄來做遞歸壓縮檢測：
2、在 Terminal 內將文章開頭的代碼貼入，按下回車鍵：
最終結果就是在每個 js 和 css 文件下分別創建了各自的壓縮代碼。
當然我們也可以創建個文件將文章最上面的代碼寫進去，然后執行該文件來操作會更加方便點。
以上就是這次的代碼學習之旅，鑒於本人才疏學淺，能力有限，上面的代碼可能有很多缺陷和不足，又是第一次寫終端執行腳本，如果問題請各位大神批評指正，在此謝過！
好記性不如爛筆頭，特此記錄，與君共勉！