本發(fā)明屬于涉及計算機軟件技術(shù)領(lǐng)域，尤其涉及一種前端開發(fā)工程化系統(tǒng)和方法。
背景技術(shù)：
隨著社會的發(fā)展，各種智能設(shè)備已經(jīng)成為人們生活和工作中不可或缺的電子設(shè)備。現(xiàn)有的智能設(shè)備能夠安裝各種應(yīng)用程序(App)，以完成各種各樣的功能?，F(xiàn)有的各種應(yīng)用程序大多需要經(jīng)過前端開發(fā)工程化系統(tǒng)來進行開發(fā)，以方便技術(shù)人員?，F(xiàn)有的典型的開發(fā)方式包括：
一種是淘寶網(wǎng)的def工具，這種開發(fā)工具的劣勢在于淘寶網(wǎng)的def工具
過分依賴于淘寶自身體系，離開了起開發(fā)環(huán)境就無法使用，不具有普適性。同時def工具配置復(fù)雜、使用學(xué)習(xí)成本高、不易于擴展。
另一種是傳統(tǒng)的前端開發(fā)采用grunt方式進行構(gòu)建，這種開發(fā)工具具有以下缺陷:插件單一；配置復(fù)雜；流程控制糟糕；頻繁的磁盤操作使得構(gòu)建效率低下；讀文件、修改文件、寫文件的循環(huán)，導(dǎo)致插件與插件之前的工作無法有效串聯(lián)起來。
還有一種是不使用工程化工具，這種方式具有以下缺點：這種開發(fā)方式原始且低效；無論是采用HTML語言、CSS語言、JS語言，開發(fā)過程中的線上的代碼均得不到任何優(yōu)化和處理，性能十分差；同時這種開發(fā)方式?jīng)]有經(jīng)過代碼混淆和壓縮，很容易暴露業(yè)務(wù)邏輯；無法使用模塊方式進行復(fù)用模塊的開發(fā)，重復(fù)會產(chǎn)生大量勞動；無法進行自動化發(fā)布及部署。
技術(shù)實現(xiàn)要素：
針對現(xiàn)有技術(shù)中在對應(yīng)用程序進行開發(fā)過程中缺少合式的開發(fā)工具的問題，本發(fā)明實施例的目的是提供一種有效且高效的前端開發(fā)工程化系統(tǒng)和方法。
為了解決上述問題，本發(fā)明實施例提出了一種前端開發(fā)工程化系統(tǒng)，包括：
項目模板化生成模塊，用于生成項目模板，并在創(chuàng)建工程時根據(jù)生成的項目模板創(chuàng)建工程的目錄和文件，并根據(jù)項目模板安裝所需依賴程序；
構(gòu)建發(fā)布模塊，用于利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內(nèi)聯(lián)、批量替換服務(wù)，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；
其中所述構(gòu)建發(fā)布模塊包括開發(fā)單元和發(fā)布單元，所述開發(fā)單元用于在系統(tǒng)工作在開發(fā)模式下時，查找當(dāng)前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務(wù)器的內(nèi)存中并返回給前端；所述發(fā)布單元用于在系統(tǒng)工作在發(fā)布模式下時，通過Gulp按順序執(zhí)行以下構(gòu)建任務(wù)：用于獲取待構(gòu)建頁面及該頁面的依賴信息的init初始化任務(wù)、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務(wù)、lint代碼語法及規(guī)范檢測任務(wù)、minify-js打包壓縮js代碼任務(wù)、用于將css和需要需要進行inline處理的js文件寫入html文件的內(nèi)聯(lián)html資源任務(wù)、復(fù)制圖片資源及html及js資源到輸出路徑的復(fù)制輸出任務(wù)；
開發(fā)環(huán)境建立模塊，用于利用Express.js建立web服務(wù)；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內(nèi)聯(lián)在html頁面內(nèi)；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構(gòu)建；并在接收到用戶指令時調(diào)用所述構(gòu)建發(fā)布模塊對目標(biāo)頁面進行開發(fā)構(gòu)建。
其中，所述系統(tǒng)還包括：
依賴更新模塊，用于對項目模板化生成模塊生成的工程的目錄和文件對應(yīng)的依賴進行更新。
其中，所述系統(tǒng)還包括：
Base64編解碼模塊，用于利用Node.js將頁面內(nèi)的字體進行base64編碼/解碼。
進一步的，本發(fā)明實施例還提出了一種前端開發(fā)工程化方法，包括：
生成項目模板，并在創(chuàng)建工程時根據(jù)生成的項目模板創(chuàng)建工程的目錄和文件，并根據(jù)項目模板安裝所需的依賴程序；
利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內(nèi)聯(lián)、批量替換服務(wù)，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；
利用Express.js建立web服務(wù)；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內(nèi)聯(lián)在html頁面內(nèi)；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構(gòu)建；并在接收到用戶指令時調(diào)用所述構(gòu)建發(fā)布模塊對目標(biāo)頁面進行開發(fā)構(gòu)建；
其中所述方法包括：
開發(fā)模式，在開發(fā)模式下所述方法包括：查找當(dāng)前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務(wù)器的內(nèi)存中并返回給前端；
發(fā)布模式，在發(fā)布模式下所述方法包括：通過Gulp按順序執(zhí)行以下構(gòu)建任務(wù)：用于獲取待構(gòu)建頁面及該頁面的依賴信息的init初始化任務(wù)、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務(wù)、lint代碼語法及規(guī)范檢測任務(wù)、minify-js打包壓縮js代碼任務(wù)、用于將css和需要需要進行inline處理的js文件寫入html文件的內(nèi)聯(lián)html資源任務(wù)、復(fù)制圖片資源及html及js資源到輸出路徑的復(fù)制輸出任務(wù)。
其中，所述方法還包括：對項目模板化生成模塊生成的工程的目錄和文件對應(yīng)的依賴進行更新。
其中，所述方法還包括：利用Node.js將頁面內(nèi)的字體進行base64編碼/解碼。
本發(fā)明的上述技術(shù)方案的有益效果如下：上述的技術(shù)方案提出了一種前端開發(fā)工程化系統(tǒng)和方法，提供了一整套解決方案，集成了webpack和gulp的打包、構(gòu)建能力；由express提供了穩(wěn)定高效的編譯、開發(fā)環(huán)境；基于Nodejs語言的特性，使得該工具非常易于維護，便于擴展，高定制化。本發(fā)明實施例的技術(shù)方案覆蓋了整個前端開發(fā)流程，從前端單元測試、代碼檢測、頁面開發(fā)調(diào)試、支持less、es6語法編譯、前端js模塊管理，js、css代碼壓縮及優(yōu)化、自動構(gòu)建、打包、發(fā)布于一體，極大的提高了前端開發(fā)者的工作效率。現(xiàn)有技術(shù)中，前端開發(fā)工程往往擁有固定的腳手架及目錄，每次創(chuàng)建新工程就意味著要手動去創(chuàng)建許多目錄結(jié)構(gòu)、相應(yīng)文件、依賴，十分浪費開發(fā)資源。使用本發(fā)明實施例的前端開發(fā)工程化系統(tǒng)，可以自動創(chuàng)建及生成工程所需的一切內(nèi)容，極大地提高了開發(fā)效率。同時，本發(fā)明實施例中在本地開發(fā)環(huán)境的集成，使得前端開發(fā)者不再需要在本地啟用apache或者nginx服務(wù)，就可以實現(xiàn)服務(wù)器端瀏覽的效果，并且繼承了一系列編譯、檢測工具，一勞永逸的解決了前端工程化的問題。憑借著webpack和gulp，打包發(fā)布的流程也得到極大地簡化，用戶只需要少量配置，就可以完成代碼優(yōu)化、編譯、發(fā)布的工作。本發(fā)明實施例實現(xiàn)了各種工具、代碼檢測、單元測試功能的集成，也提升了前端的開發(fā)效率，減少了后期優(yōu)化的成本，降低了線上問題風(fēng)險。
附圖說明
圖1是本發(fā)明實施例的系統(tǒng)結(jié)構(gòu)示意圖。
具體實施方式
為使本發(fā)明要解決的技術(shù)問題、技術(shù)方案和優(yōu)點更加清楚，下面將結(jié)合附圖及具體實施例進行詳細(xì)描述。
本發(fā)明實施例提出了一種如圖1所示的前端開發(fā)工程化系統(tǒng)和方法。本發(fā)明實施例中應(yīng)用到的現(xiàn)有技術(shù)包括：
1、Node.js：Node.js是一個Javascript運行環(huán)境(runtime)。實際上它是對Google V8引擎進行了封裝。V8引擎執(zhí)行Javascript的速度非?？欤阅芊浅：?。Node.js對一些特殊用例進行了優(yōu)化，提供了替代的API，使得V8在非瀏覽器環(huán)境下運行得更好。Node.js是一個基于Chrome JavaScript運行時建立的平臺，用于方便地搭建響應(yīng)速度快、易于擴展的網(wǎng)絡(luò)應(yīng)用。Node.js使用事件驅(qū)動，非阻塞I/O模型而得以輕量和高效，非常適合在分布式設(shè)備上運行數(shù)據(jù)密集型的實時應(yīng)用。
2、Express:Express是一個簡潔而靈活的node.js Web應(yīng)用框架,提供一系列強大特性幫助你創(chuàng)建各種Web應(yīng)用。Express不對node.js已有的特性進行二次抽象，我們只是在它之上擴展了Web應(yīng)用所需的功能。豐富的HTTP工具以及來自Connect框架的中間件隨取隨用，創(chuàng)建強健、友好的API變得快速又簡單。
3、Webpack：Webpack是一款用戶打包前端模塊的工具。主要是用來打包在瀏覽器端使用的javascript的。同時也能轉(zhuǎn)換、捆綁、打包其他的靜態(tài)資源，包括css、image、font file、template等。
4、Gulp:基于文件流的構(gòu)建系統(tǒng)。
5、Grunt:Grunt是一個基于Nodejs的自動化任務(wù)執(zhí)行工具
6、npm:NPM的全稱是Node Package Manager，是一個NodeJS包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊(包)的標(biāo)準(zhǔn)。
7、iconfont：國內(nèi)功能很強大且圖標(biāo)內(nèi)容很豐富的矢量圖標(biāo)庫。
8、js:JavaScript的縮寫。JavaScript是世界上最流行的編程語言之一，被廣泛應(yīng)用于HTML和Web領(lǐng)域，并被廣泛用于服務(wù)器、PC、筆記本電腦、平板電腦和智能手機等設(shè)備。JavaScript是一種腳本語言、一種輕量級的編程語言、可插入HTML頁面的編程代碼。當(dāng)js被插入到HTML頁面后，可由所有的現(xiàn)代瀏覽器執(zhí)行。
本發(fā)明實施例提出了一種如圖1所示的前端開發(fā)工程化系統(tǒng)，包括：
為了解決上述問題，本發(fā)明實施例提出了一種前端開發(fā)工程化系統(tǒng)，包括：
項目模板化生成模塊，用于生成項目模板，并在創(chuàng)建工程時根據(jù)生成的項目模板創(chuàng)建工程的目錄和文件，并根據(jù)項目模板安裝所需依賴程序；
構(gòu)建發(fā)布模塊，用于利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內(nèi)聯(lián)、批量替換服務(wù)，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；
其中所述構(gòu)建發(fā)布模塊包括開發(fā)單元和發(fā)布單元，所述開發(fā)單元用于在系統(tǒng)工作在開發(fā)模式下時，查找當(dāng)前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務(wù)器的內(nèi)存中并返回給前端；所述發(fā)布單元用于在系統(tǒng)工作在發(fā)布模式下時，通過Gulp按順序執(zhí)行以下構(gòu)建任務(wù)：用于獲取待構(gòu)建頁面及該頁面的依賴信息的init初始化任務(wù)、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務(wù)、lint代碼語法及規(guī)范檢測任務(wù)、minify-js打包壓縮js代碼任務(wù)、用于將css和需要需要進行inline處理的js文件寫入html文件的內(nèi)聯(lián)html資源任務(wù)、復(fù)制圖片資源及html及js資源到輸出路徑的復(fù)制輸出任務(wù)；
開發(fā)環(huán)境建立模塊，用于利用Express.js建立web服務(wù)；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內(nèi)聯(lián)在html頁面內(nèi)；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構(gòu)建；并在接收到用戶指令時調(diào)用所述構(gòu)建發(fā)布模塊對目標(biāo)頁面進行開發(fā)構(gòu)建。
其中，所述系統(tǒng)還包括：
依賴更新模塊，用于對項目模板化生成模塊生成的工程的目錄和文件對應(yīng)的依賴進行更新。
其中，所述系統(tǒng)還包括：
Base64編解碼模塊，用于利用Node.js將頁面內(nèi)的字體進行base64編碼/解碼。
進一步的，本發(fā)明實施例還提出了一種前端開發(fā)工程化方法，包括：
生成項目模板，并在創(chuàng)建工程時根據(jù)生成的項目模板創(chuàng)建工程的目錄和文件，并根據(jù)項目模板安裝所需的依賴程序；
利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內(nèi)聯(lián)、批量替換服務(wù)，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；
利用Express.js建立web服務(wù)；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內(nèi)聯(lián)在html頁面內(nèi)；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構(gòu)建；并在接收到用戶指令時調(diào)用所述構(gòu)建發(fā)布模塊對目標(biāo)頁面進行開發(fā)構(gòu)建；
其中所述方法包括：
開發(fā)模式，在開發(fā)模式下所述方法包括：查找當(dāng)前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務(wù)器的內(nèi)存中并返回給前端；
發(fā)布模式，在發(fā)布模式下所述方法包括：通過Gulp按順序執(zhí)行以下構(gòu)建任務(wù)：用于獲取待構(gòu)建頁面及該頁面的依賴信息的init初始化任務(wù)、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務(wù)、lint代碼語法及規(guī)范檢測任務(wù)、minify-js打包壓縮js代碼任務(wù)、用于將css和需要需要進行inline處理的js文件寫入html文件的內(nèi)聯(lián)html資源任務(wù)、復(fù)制圖片資源及html及js資源到輸出路徑的復(fù)制輸出任務(wù)。
其中，所述方法還包括：對項目模板化生成模塊生成的工程的目錄和文件對應(yīng)的依賴進行更新。
其中，所述方法還包括：利用Node.js將頁面內(nèi)的字體進行base64編碼/解碼。
本發(fā)明主要功能為以下幾個模塊：
1、項目模塊化生成器(bid init)：
快速生成約定項目模板，當(dāng)用戶執(zhí)行項目初始化命令時，會自動創(chuàng)建工程項目的目錄及相關(guān)文件，并安裝所需各種依賴，提升前端開發(fā)者的工作效率。
若要在一個新的目錄下新建bid工程，可在該文件夾下使用bid init命令，會自動安裝好所需要的依賴，同時生成出工程必須的目錄結(jié)構(gòu)。
2、開發(fā)環(huán)境服務(wù)器(bid dev)：
通過express.js建立web服務(wù)，通過多種express中間件，以及webpack提供的打包服務(wù)，完美的支持了less、sass、es6、react編譯，以及css、js文件壓縮、丑化、合并，并支持將代碼內(nèi)聯(lián)在html中，減少多次http請求所消耗的時間及資源。通過webpack及其中間件模塊，代碼熱刷新及實時編譯構(gòu)建(傳統(tǒng)方式是watch文件后在進行構(gòu)建或通過手動重啟服務(wù)實現(xiàn)重新編譯)。
在使用bid dev命令后，node服務(wù)端會自動在本地啟動生成express server，同時遍歷啟動命令所在的目錄結(jié)構(gòu)下的工程目錄，將全部頁面以列表的形式展現(xiàn)在web端，用戶點擊某一具體頁面，將通過構(gòu)建模塊(詳見下文)進行開發(fā)構(gòu)建。
3、構(gòu)建及發(fā)布模塊(bid build)：
使用gulp及webpack，通過相應(yīng)中間件，提供模塊化的代碼編譯、壓縮、混淆、代碼內(nèi)聯(lián)、批量替換服務(wù)，并生成最輕量的壓縮后的代碼，保證線上文件得到最優(yōu)化處理，并最大限度保護線上代碼邏輯的安全性。
通過webpack相關(guān)插件以及npm包管理器中發(fā)布的多種lint模塊，提供css、js代碼規(guī)范及健康檢測，及時發(fā)現(xiàn)代碼的問題，并建立良好的前端開發(fā)規(guī)范，幫助前端開發(fā)者養(yǎng)成良好的編碼習(xí)慣。
通過nodejs調(diào)用linux服務(wù)端發(fā)布腳本及發(fā)布配置文件，可將構(gòu)建后的代碼并行發(fā)布至多臺服務(wù)器，提高發(fā)布效率。
在開發(fā)模式下，調(diào)用構(gòu)建服務(wù)，會先查找將當(dāng)前頁面引用的全部js資源，將less編譯解析生成css文件，然后將這些依賴打包、合并，并輸出至開發(fā)服務(wù)器的內(nèi)存中返回給前端。這種模式并不會生成任何文件，同時也不會對代碼進行混淆，以方便開發(fā)者測試。
在發(fā)布模式下，調(diào)用構(gòu)建服務(wù)，會通過gulp按順序執(zhí)行以下構(gòu)建任務(wù)：init初始化(獲取待構(gòu)建頁面及其依賴信息)、clean清理build目錄、lint代碼語法及規(guī)范檢測、minify-js打包壓縮js代碼、內(nèi)聯(lián)html資源(將css和需要inline的js文件寫入html文件)、復(fù)制圖片資源、html、js資源至輸出路徑。
4、更新工程依賴模塊(bid update)：
由于該發(fā)明的功能在不斷添加，引用的依賴也會越來越多，為了及時能夠使用到最新的功能，并確保需代碼引用的依賴能夠正常工作，需要為該發(fā)明提供依賴更新模塊。
用戶可以通過bid update命令對所需依賴進行更新。
5、其他工具模塊(bid iconfont)：
通過nodejs，可以將ttf或者iconfont字體文件base64，節(jié)約線上字體加載請求，提高頁面性能及效率。
以上所述是本發(fā)明的優(yōu)選實施方式，應(yīng)當(dāng)指出，對于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明所述原理的前提下，還可以作出若干改進和潤飾，這些改進和潤飾也應(yīng)視為本發(fā)明的保護范圍。