自己動手打造代碼壓縮合并工具

2019-11-15 01:59:10

字體：大中小

來源：轉載

供稿：網友

自己動手打造代碼壓縮合并工具

時下grunt非常的火啊，用著雖然很爽，但是它的配置確實很煩。如果之前沒有用過，想要一下子熟練駕馭它，有一定的學習成本，而且還要裝node這個大家伙，項目之初我們選擇了compiler.jar這個輕量的工具進行打包。我一直在尋思著，如何編寫一鍵打包工具。之前呢是手工的拼接好有的js文件，做成符合compiler.jar打包文件所要求的批處理文件，然后運行這個批處理，生成我們需要的js和CSS文件。隨著js文件數量的增長，純手工拼接這些文件的地址就變得非常考驗人的耐心了，而且還容易漏掉或重復某些文件，于是“一鍵打包工具”的編寫就變得刻不容緩了。下面是一個真實的index.html文件的一部分：

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">    <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1, user-scalable=0, maximum-scale=1">     <!--隱藏瀏覽器的工具欄和菜單欄,對iso系統起用-->    <!--用于PC上調式，不參與合并壓縮-->    <script src="lib/data/database.js" name="noBuild"></script>    <!--Iframe加載處理-->    <script src="lib/LoadMode.js"></script>    <script src="lib/core/jQuery.js"></script>    <script src="lib/core/underscore.js"></script>    <script src="lib/animate/SVGIcons/snap.min.js"></script>    <script src="lib/animate/pixi.js"></script>    <script src="lib/core/Xut.js"></script>    <script src="lib/core/isMobile.js"></script>    <script src="lib/core/aaronRequire.js"></script>    <script src="lib/core/nextTick.js"></script>    <script src="lib/Config.js"></script>    <script src="lib/core/lang/Object.js"></script>    <script src="lib/core/lang/Function.js"></script>    <script src="lib/core/lang/Array.js"></script>    <script src="lib/core/video.js"></script>    <!-- 自定義事件，合集處理，iframe通訊 -->    <script src="lib/core/event/asEvented.js"></script>    <script src="lib/core/message/pms.js"></script>    <!--插件-->    <script src="lib/plugin/cordova.js"></script>    <script src="lib/plugin/readAssetsFilePlugin.js"></script>    <script src="lib/plugin/initDatabase.js"></script>    <script src="lib/plugin/web.js"></script>    <script src="lib/plugin/video.js"></script>    <script src="lib/plugin/openAppPlugin.js"></script>    <script src="lib/plugin/tabletPlugin.js"></script>    <script src="lib/plugin/statusbar.js"></script>    <script src="lib/plugin/iap.js"></script>    <script src="lib/plugin/AppStoreLink.js"></script>    <script src="lib/plugin/downloadPlugin.js"></script>    <script src="lib/plugin/xxteManager.js"></script>    <script src="lib/plugin/unzipPlugin.js"></script>    <script src="lib/plugin/readPlugin.js"></script>    <script src="lib/plugin/deletePlugin.js"></script>    <!-- 動畫庫 -->    <script src="lib/animate/TweenMax.min.js"></script>    <script src="lib/animate/plugins/Throw后面還有很長，bug,活人不能被尿憋死，辦法總比問題多。我是會一點php的，php在處理文件方面是很拿手的，是時候讓它發揮點作用了。于是我想到了用php去自動提出index里邊的js和css，然后按指定的格式生成批處理文件，在后臺用靜默方式運行這個批處理，最后把結果返回給顯示器。這樣我就可以坐享其成了。想想都有點小激動喲，于是簡單的寫了一個界面.
接下來就是實現功能了，先不著急編寫代碼，分析下需求：
1. 遍歷index.html文件，提取js文件或css文件.
2. 對這文件進行過慮，因為有些是注釋掉的，有些是調式用的。
3. 生成對應的批處理文件
4. 執行批處理文件
5. 顯示處理結果
即然有兩種情況，我就用一個工廠模式來適配，方便以后擴