一句命令快速合併 JS、CSS

胡尐睿丶發表於2013-08-31

  在專案開發環境下,我們會把 JS 程式碼儘可能模組化,方便管理和修改,這就避免不了會出現一個專案自身 JS 檔案數量達到 10 個或者更多。

  而專案上線後,會要求將所有 JS 檔案合併為 1 個或者幾個,手動的操作雖然也不是問題,但每次修改更新都要手動操作合併一遍,這就肯定是個噩夢了。

  這種情況下,一些工具也就隨之產生,比如線上合併,一些網站提供js檔案上傳,然後合併,但這還是很麻煩,如果開發環境沒有網路呢?

  這會我就想到了 windows 系統下的 cmd 裡的 copy 命令,它雖然是個複製的功能,但實則也是可以實現合併檔案的需求,下面就看下這句程式碼:

copy a.js+b.js+c.js abc.js /b

  相信不會太多程式設計的人閱讀上面那句程式碼也能大致讀懂意思:通過 copy 命令將 a.js b.js c.js 合併為一個 abc.js,最後的 /b 表示檔案為二進位檔案,copy 命令的其它引數可以在 cmd 裡輸入 copy /? 學習,這裡就不再細述。

  說到這裡,其實 windows 本身就可以完成我們的需求,也不用安裝什麼其它工具了,下面我們要做的就是將這一切操作更簡單。

  我們在專案存放 JS 的資料夾下新建一個 TXT 檔案,將程式碼複製進去,並修改需要合併哪些檔案,最後儲存並將 TXT 修改為 BAT 字尾,如:

copy core.js+hros.app.js+hros.appmanage.js+hros.base.js+hros.copyright.js+hros.desktop.js+hros.dock.js+hros.folderView.js+hros.grid.js+hros.maskBox.js+hros.navbar.js+hros.popupMenu.js+hros.searchbar.js+hros.startmenu.js+hros.taskbar.js+hros.uploadFile.js+hros.wallpaper.js+hros.widget.js+hros.window.js+hros.zoom.js+templates.js+util.js core.min.js /b

  接下來我們雙擊下那個 BAT 檔案,看到效果了吧?這就是我們想要的。以後每次上線前,只需雙擊下這個檔案,系統就會自動合併並生成一個合併好的檔案,比起其它什麼工具,這個的效率簡直無法直視。

  如果你本地還安裝過 UglifyJS 這個工具,可以在程式碼後面加一句壓縮的程式碼,如:

copy core.js+hros.app.js+hros.appmanage.js+hros.base.js+hros.copyright.js+hros.desktop.js+hros.dock.js+hros.folderView.js+hros.grid.js+hros.maskBox.js+hros.navbar.js+hros.popupMenu.js+hros.searchbar.js+hros.startmenu.js+hros.taskbar.js+hros.uploadFile.js+hros.wallpaper.js+hros.widget.js+hros.window.js+hros.zoom.js+templates.js+util.js core.min.js /b
uglifyjs core.min.js -m -o core.min.js

  這樣每次合併好後就自動壓縮了,又省了一步操作。

  CSS 合併同理。

相關文章