職責(zé)拆分：gulp相關(guān)構(gòu)建代碼的重構(gòu)方案

職責(zé)拆分：gulp相關(guān)構(gòu)建代碼的重構(gòu)?案今天在讀微信?程序項(xiàng)?的代碼，主要看了構(gòu)建的部分，在讀這部分代碼和畫架構(gòu)圖的過(guò)程中，發(fā)現(xiàn)了?些不是很合理的地?。我們的?程序構(gòu)建?案scss來(lái)做css樣式的管理，使?babel解析js的es6、7和flow語(yǔ)法，使?單?件組件（sfc）的形式整合wxml、wxss、js等。構(gòu)建的最終產(chǎn)物是?程序的原?代碼，然后經(jīng)由?程序開發(fā)者?具再次打包和構(gòu)建。我們構(gòu)建使?的是gulp。因?yàn)橹皇?種資源的處理，不涉及到模塊解析，所以gulp?webpack更合適。構(gòu)建相關(guān)代碼的結(jié)構(gòu)插件、配置和?具等通?代碼這3部分。項(xiàng)?中對(duì)應(yīng)的?件有5個(gè)，根?錄下的gulpfile.js和build?錄下的compile、util、config等?件。他們之間的關(guān)系如下圖：命令?使?build、dev、qa、sgb等npmscripts會(huì)對(duì)應(yīng)的執(zhí)?build、default的task，兩者各?有??的處理流程。處理過(guò)程中會(huì)?到我們擴(kuò)展的解析單?件組件的gulp插件。圖中綠?部分是可復(fù)?的utils、config代碼，紅?部分是task相關(guān)的代碼，?橙?部分是我們所擴(kuò)展的gulp插件。他們之間的關(guān)系如圖所?，但從代碼的?錄結(jié)構(gòu)中并不能清楚地看出這種關(guān)系，需要具體去看代碼才能逐步理清。構(gòu)建代碼重構(gòu)的想法現(xiàn)在的?錄結(jié)構(gòu)沒(méi)有清晰反映出task、plugin等的關(guān)系，?且命名也達(dá)不到見(jiàn)名知意的要求，于是我有了重構(gòu)的想法。我按照之前分析出的代碼職責(zé)調(diào)整了?下?錄結(jié)構(gòu)：tasksflowcompile-sfc.jsclean-distDir.jscompile-sass.jscompile-js.jshandle-config.jscopy-otherFiles.jsproduction-task.jsdev-task.jspluginssfcindex.jsmy-script-compiler.jsconfigindex.jsutilsindex.jsindex.js?先拆分出了tasks、plugins這兩個(gè)?錄，config、utils考慮到后來(lái)的擴(kuò)展也改成?錄的形式了。tasks下?是production、dev兩種環(huán)境下的任務(wù)，他們的實(shí)現(xiàn)流程需要組合flow下的細(xì)?步驟實(shí)現(xiàn)。plugins下明確封裝了解析sfc的gulp插件，包括解析sfc中js代碼的部分。除這些以外，還應(yīng)該把gulpfile移到build?錄下，因?yàn)間ulpfile也是build的?部分，放到build下更合理，就像vuecli腳?架?成的代碼把webpack.config.js放到build下?樣。src下的代碼也不應(yīng)該引?build的代碼，應(yīng)該通過(guò)環(huán)境變量、全局變量等?式。這樣的重構(gòu)只是靜態(tài)代碼結(jié)構(gòu)的變更，對(duì)代碼的運(yùn)?并沒(méi)有啥影響，但代碼的易理解和易維護(hù)性會(huì)增強(qiáng)?些?？偨Y(jié)總結(jié)為了更便捷的開發(fā)、更好地代碼可維護(hù)性，我們使?了scss、babel等預(yù)處理?具，使?單?件組件（sfc）的?式整合頁(yè)?相關(guān)的wxml、wxss、js代碼，相應(yīng)的也就需要把這些資源的處理增加到構(gòu)建流程中。經(jīng)分析，使?gulp是?較合適的。讀代碼結(jié)合畫代碼結(jié)構(gòu)圖理清了代碼從邏輯上的職責(zé)劃分，也發(fā)現(xiàn)了?些命名??不太合理的地?，于是也就有了重構(gòu)的想法。主要?向是把不同的職責(zé)的代碼（?如task、flow、plugin）放到不同的?件和?錄中去，?不要都堆到?起。于是，按照代碼的不同職責(zé)分出plugins、tasks和utils、config?錄，把gulpfile也放?build?錄下，把task的執(zhí)