gulp、laravel-mix ，工作經驗、使用心得

前情提要 

最近在和以前的老師聊天，趁這段空閒期間，做些什麼事情。

: 老師，你那邊有沒有我能幫忙的，我最近有空檔可以做。

師:  我最近在用voyager在做客戶的後台，但他的樣式需要打造成設計稿的模樣。

我看了一下voyager，是一個集成管理後台，很多設定與頁面皆可透過管理後台來完成。
用了一下之後，的確有他的優勢、劣勢也因它的優勢而有所限制，既是他的優勢也是他的劣勢。
可以在後台新增crud 的管理，crud圍繞在voyager的限定之下，若要做到複合式的查詢表 或 客製化葉面就要另外寫自己的controller。

因為voyager 已經很很久沒在更新了，他的前端套件是用vue2 + bootstrap3。

當我看到一整個前端框架後採用的是vue2的時候，起初有先測試升級vue3後，所有vue2的寫法換成vue3，但因2和3的版本寫法上不同，既使改寫了也會產生許多bug，許多載入後的compoment  無法順利預算渲染 亦或是 vue3 有順利執行無法顯示元件。

衡量了一下時間與風險處理，這次僅幫忙刻製樣式(圖1)與升級套件，主要是將過舊的元件升級、CSS FRAMEWORK 更新、畫面客製化。

圖1. 切版示意圖

gulp 在執行開發前端很方便，尤其是在刻版UI/UX，也可以多緒的處理執行。

此外，再開發時因為需要即時編譯，所以監測時我會選擇分開監測 ，js、sass 、html、img，這樣的好處是當只有指定監測改變 其他的監測項目 不會再次編譯，只有該內容改變監測的項目才會更新，ex: html 內容異動，只編譯html、scss 改變，只編譯scss。(圖2)

圖2. gulpfile.js 監測部分

laravel-mix 使用起來 和gulp 差不多，比較可惜的地方是沒有辦法像gulp 可以分開監測，但mix 在輸出css、js 中會去解決vendor引入的路徑不對的問題，所以再引入的時候 不需要去想前面要有多少個../../ ，mix 就能處理好。

那這次兩個方法中，無論用哪個方法都能輸出all.js、all.css ，在有多個套件要更新與修改的狀況下，會選擇的是mix，不需要再去思考 這個外掛套件的vendor 到底是否有找到對的路徑。

最後這是重新升級後的voyager，前端使用的是bootstrap5、vue2...等