本發(fā)明屬于涉及計算機軟件技術領域，尤其涉及一種前端開發(fā)工程化系統(tǒng)和方法。

背景技術：

隨著社會的發(fā)展，各種智能設備已經成為人們生活和工作中不可或缺的電子設備。現有的智能設備能夠安裝各種應用程序(App)，以完成各種各樣的功能?，F有的各種應用程序大多需要經過前端開發(fā)工程化系統(tǒng)來進行開發(fā)，以方便技術人員?，F有的典型的開發(fā)方式包括：

一種是淘寶網的def工具，這種開發(fā)工具的劣勢在于淘寶網的def工具

過分依賴于淘寶自身體系，離開了起開發(fā)環(huán)境就無法使用，不具有普適性。同時def工具配置復雜、使用學習成本高、不易于擴展。

另一種是傳統(tǒng)的前端開發(fā)采用grunt方式進行構建，這種開發(fā)工具具有以下缺陷:插件單一；配置復雜；流程控制糟糕；頻繁的磁盤操作使得構建效率低下；讀文件、修改文件、寫文件的循環(huán)，導致插件與插件之前的工作無法有效串聯起來。

還有一種是不使用工程化工具，這種方式具有以下缺點：這種開發(fā)方式原始且低效；無論是采用HTML語言、CSS語言、JS語言，開發(fā)過程中的線上的代碼均得不到任何優(yōu)化和處理，性能十分差；同時這種開發(fā)方式沒有經過代碼混淆和壓縮，很容易暴露業(yè)務邏輯；無法使用模塊方式進行復用模塊的開發(fā)，重復會產生大量勞動；無法進行自動化發(fā)布及部署。

技術實現要素：

針對現有技術中在對應用程序進行開發(fā)過程中缺少合式的開發(fā)工具的問題，本發(fā)明實施例的目的是提供一種有效且高效的前端開發(fā)工程化系統(tǒng)和方法。

為了解決上述問題，本發(fā)明實施例提出了一種前端開發(fā)工程化系統(tǒng)，包括：

項目模板化生成模塊，用于生成項目模板，并在創(chuàng)建工程時根據生成的項目模板創(chuàng)建工程的目錄和文件，并根據項目模板安裝所需依賴程序；

構建發(fā)布模塊，用于利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內聯、批量替換服務，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；

其中所述構建發(fā)布模塊包括開發(fā)單元和發(fā)布單元，所述開發(fā)單元用于在系統(tǒng)工作在開發(fā)模式下時，查找當前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務器的內存中并返回給前端；所述發(fā)布單元用于在系統(tǒng)工作在發(fā)布模式下時，通過Gulp按順序執(zhí)行以下構建任務：用于獲取待構建頁面及該頁面的依賴信息的init初始化任務、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務、lint代碼語法及規(guī)范檢測任務、minify-js打包壓縮js代碼任務、用于將css和需要需要進行inline處理的js文件寫入html文件的內聯html資源任務、復制圖片資源及html及js資源到輸出路徑的復制輸出任務；

開發(fā)環(huán)境建立模塊，用于利用Express.js建立web服務；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內聯在html頁面內；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構建；并在接收到用戶指令時調用所述構建發(fā)布模塊對目標頁面進行開發(fā)構建。

其中，所述系統(tǒng)還包括：

依賴更新模塊，用于對項目模板化生成模塊生成的工程的目錄和文件對應的依賴進行更新。

其中，所述系統(tǒng)還包括：

Base64編解碼模塊，用于利用Node.js將頁面內的字體進行base64編碼/解碼。

進一步的，本發(fā)明實施例還提出了一種前端開發(fā)工程化方法，包括：

生成項目模板，并在創(chuàng)建工程時根據生成的項目模板創(chuàng)建工程的目錄和文件，并根據項目模板安裝所需的依賴程序；

利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內聯、批量替換服務，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；

利用Express.js建立web服務；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內聯在html頁面內；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構建；并在接收到用戶指令時調用所述構建發(fā)布模塊對目標頁面進行開發(fā)構建；

其中所述方法包括：

開發(fā)模式，在開發(fā)模式下所述方法包括：查找當前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務器的內存中并返回給前端；

發(fā)布模式，在發(fā)布模式下所述方法包括：通過Gulp按順序執(zhí)行以下構建任務：用于獲取待構建頁面及該頁面的依賴信息的init初始化任務、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務、lint代碼語法及規(guī)范檢測任務、minify-js打包壓縮js代碼任務、用于將css和需要需要進行inline處理的js文件寫入html文件的內聯html資源任務、復制圖片資源及html及js資源到輸出路徑的復制輸出任務。

其中，所述方法還包括：對項目模板化生成模塊生成的工程的目錄和文件對應的依賴進行更新。

其中，所述方法還包括：利用Node.js將頁面內的字體進行base64編碼/解碼。

本發(fā)明的上述技術方案的有益效果如下：上述的技術方案提出了一種前端開發(fā)工程化系統(tǒng)和方法，提供了一整套解決方案，集成了webpack和gulp的打包、構建能力；由express提供了穩(wěn)定高效的編譯、開發(fā)環(huán)境；基于Nodejs語言的特性，使得該工具非常易于維護，便于擴展，高定制化。本發(fā)明實施例的技術方案覆蓋了整個前端開發(fā)流程，從前端單元測試、代碼檢測、頁面開發(fā)調試、支持less、es6語法編譯、前端js模塊管理，js、css代碼壓縮及優(yōu)化、自動構建、打包、發(fā)布于一體，極大的提高了前端開發(fā)者的工作效率。現有技術中，前端開發(fā)工程往往擁有固定的腳手架及目錄，每次創(chuàng)建新工程就意味著要手動去創(chuàng)建許多目錄結構、相應文件、依賴，十分浪費開發(fā)資源。使用本發(fā)明實施例的前端開發(fā)工程化系統(tǒng)，可以自動創(chuàng)建及生成工程所需的一切內容，極大地提高了開發(fā)效率。同時，本發(fā)明實施例中在本地開發(fā)環(huán)境的集成，使得前端開發(fā)者不再需要在本地啟用apache或者nginx服務，就可以實現服務器端瀏覽的效果，并且繼承了一系列編譯、檢測工具，一勞永逸的解決了前端工程化的問題。憑借著webpack和gulp，打包發(fā)布的流程也得到極大地簡化，用戶只需要少量配置，就可以完成代碼優(yōu)化、編譯、發(fā)布的工作。本發(fā)明實施例實現了各種工具、代碼檢測、單元測試功能的集成，也提升了前端的開發(fā)效率，減少了后期優(yōu)化的成本，降低了線上問題風險。

附圖說明

圖1是本發(fā)明實施例的系統(tǒng)結構示意圖。

具體實施方式

為使本發(fā)明要解決的技術問題、技術方案和優(yōu)點更加清楚，下面將結合附圖及具體實施例進行詳細描述。

本發(fā)明實施例提出了一種如圖1所示的前端開發(fā)工程化系統(tǒng)和方法。本發(fā)明實施例中應用到的現有技術包括：

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運行時建立的平臺，用于方便地搭建響應速度快、易于擴展的網絡應用。Node.js使用事件驅動，非阻塞I/O模型而得以輕量和高效，非常適合在分布式設備上運行數據密集型的實時應用。

2、Express:Express是一個簡潔而靈活的node.js Web應用框架,提供一系列強大特性幫助你創(chuàng)建各種Web應用。Express不對node.js已有的特性進行二次抽象，我們只是在它之上擴展了Web應用所需的功能。豐富的HTTP工具以及來自Connect框架的中間件隨取隨用，創(chuàng)建強健、友好的API變得快速又簡單。

3、Webpack：Webpack是一款用戶打包前端模塊的工具。主要是用來打包在瀏覽器端使用的javascript的。同時也能轉換、捆綁、打包其他的靜態(tài)資源，包括css、image、font file、template等。

4、Gulp:基于文件流的構建系統(tǒng)。

5、Grunt:Grunt是一個基于Nodejs的自動化任務執(zhí)行工具

6、npm:NPM的全稱是Node Package Manager，是一個NodeJS包管理和分發(fā)工具，已經成為了非官方的發(fā)布Node模塊(包)的標準。

7、iconfont：國內功能很強大且圖標內容很豐富的矢量圖標庫。

8、js:JavaScript的縮寫。JavaScript是世界上最流行的編程語言之一，被廣泛應用于HTML和Web領域，并被廣泛用于服務器、PC、筆記本電腦、平板電腦和智能手機等設備。JavaScript是一種腳本語言、一種輕量級的編程語言、可插入HTML頁面的編程代碼。當js被插入到HTML頁面后，可由所有的現代瀏覽器執(zhí)行。

本發(fā)明實施例提出了一種如圖1所示的前端開發(fā)工程化系統(tǒng)，包括：

為了解決上述問題，本發(fā)明實施例提出了一種前端開發(fā)工程化系統(tǒng)，包括：

項目模板化生成模塊，用于生成項目模板，并在創(chuàng)建工程時根據生成的項目模板創(chuàng)建工程的目錄和文件，并根據項目模板安裝所需依賴程序；

構建發(fā)布模塊，用于利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內聯、批量替換服務，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；

其中所述構建發(fā)布模塊包括開發(fā)單元和發(fā)布單元，所述開發(fā)單元用于在系統(tǒng)工作在開發(fā)模式下時，查找當前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務器的內存中并返回給前端；所述發(fā)布單元用于在系統(tǒng)工作在發(fā)布模式下時，通過Gulp按順序執(zhí)行以下構建任務：用于獲取待構建頁面及該頁面的依賴信息的init初始化任務、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務、lint代碼語法及規(guī)范檢測任務、minify-js打包壓縮js代碼任務、用于將css和需要需要進行inline處理的js文件寫入html文件的內聯html資源任務、復制圖片資源及html及js資源到輸出路徑的復制輸出任務；

開發(fā)環(huán)境建立模塊，用于利用Express.js建立web服務；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內聯在html頁面內；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構建；并在接收到用戶指令時調用所述構建發(fā)布模塊對目標頁面進行開發(fā)構建。

其中，所述系統(tǒng)還包括：

依賴更新模塊，用于對項目模板化生成模塊生成的工程的目錄和文件對應的依賴進行更新。

其中，所述系統(tǒng)還包括：

Base64編解碼模塊，用于利用Node.js將頁面內的字體進行base64編碼/解碼。

進一步的，本發(fā)明實施例還提出了一種前端開發(fā)工程化方法，包括：

生成項目模板，并在創(chuàng)建工程時根據生成的項目模板創(chuàng)建工程的目錄和文件，并根據項目模板安裝所需的依賴程序；

利用Gulp和Webpack中間件進行模塊化的代碼編譯、壓縮、混淆、代碼內聯、批量替換服務，并生成輕量的壓縮后的代碼；還用于通過Webpack中間件和npm進行css、js代碼規(guī)范及健康檢測；

利用Express.js建立web服務；通過Express的中間件進行l(wèi)ess、sass、es6、react編譯及css、js文件壓縮、丑化、合并,并將代碼內聯在html頁面內；并通過及Webpack及中間件進行代碼熱刷新及實時編譯構建；并在接收到用戶指令時調用所述構建發(fā)布模塊對目標頁面進行開發(fā)構建；

其中所述方法包括：

開發(fā)模式，在開發(fā)模式下所述方法包括：查找當前頁面引用的全部js資源，并將less編譯解析生成css文件，并將這些依賴文件進行打包、合并后發(fā)送到開發(fā)服務器的內存中并返回給前端；

發(fā)布模式，在發(fā)布模式下所述方法包括：通過Gulp按順序執(zhí)行以下構建任務：用于獲取待構建頁面及該頁面的依賴信息的init初始化任務、清理項目模板化生成模塊創(chuàng)建的工程的目錄的Clean任務、lint代碼語法及規(guī)范檢測任務、minify-js打包壓縮js代碼任務、用于將css和需要需要進行inline處理的js文件寫入html文件的內聯html資源任務、復制圖片資源及html及js資源到輸出路徑的復制輸出任務。

其中，所述方法還包括：對項目模板化生成模塊生成的工程的目錄和文件對應的依賴進行更新。

其中，所述方法還包括：利用Node.js將頁面內的字體進行base64編碼/解碼。

本發(fā)明主要功能為以下幾個模塊：

1、項目模塊化生成器(bid init)：

快速生成約定項目模板，當用戶執(zhí)行項目初始化命令時，會自動創(chuàng)建工程項目的目錄及相關文件，并安裝所需各種依賴，提升前端開發(fā)者的工作效率。

若要在一個新的目錄下新建bid工程，可在該文件夾下使用bid init命令，會自動安裝好所需要的依賴，同時生成出工程必須的目錄結構。

2、開發(fā)環(huán)境服務器(bid dev)：

通過express.js建立web服務，通過多種express中間件，以及webpack提供的打包服務，完美的支持了less、sass、es6、react編譯，以及css、js文件壓縮、丑化、合并，并支持將代碼內聯在html中，減少多次http請求所消耗的時間及資源。通過webpack及其中間件模塊，代碼熱刷新及實時編譯構建(傳統(tǒng)方式是watch文件后在進行構建或通過手動重啟服務實現重新編譯)。

在使用bid dev命令后，node服務端會自動在本地啟動生成express server，同時遍歷啟動命令所在的目錄結構下的工程目錄，將全部頁面以列表的形式展現在web端，用戶點擊某一具體頁面，將通過構建模塊(詳見下文)進行開發(fā)構建。

3、構建及發(fā)布模塊(bid build)：

使用gulp及webpack，通過相應中間件，提供模塊化的代碼編譯、壓縮、混淆、代碼內聯、批量替換服務，并生成最輕量的壓縮后的代碼，保證線上文件得到最優(yōu)化處理，并最大限度保護線上代碼邏輯的安全性。

通過webpack相關插件以及npm包管理器中發(fā)布的多種lint模塊，提供css、js代碼規(guī)范及健康檢測，及時發(fā)現代碼的問題，并建立良好的前端開發(fā)規(guī)范，幫助前端開發(fā)者養(yǎng)成良好的編碼習慣。

通過nodejs調用linux服務端發(fā)布腳本及發(fā)布配置文件，可將構建后的代碼并行發(fā)布至多臺服務器，提高發(fā)布效率。

在開發(fā)模式下，調用構建服務，會先查找將當前頁面引用的全部js資源，將less編譯解析生成css文件，然后將這些依賴打包、合并，并輸出至開發(fā)服務器的內存中返回給前端。這種模式并不會生成任何文件，同時也不會對代碼進行混淆，以方便開發(fā)者測試。

在發(fā)布模式下，調用構建服務，會通過gulp按順序執(zhí)行以下構建任務：init初始化(獲取待構建頁面及其依賴信息)、clean清理build目錄、lint代碼語法及規(guī)范檢測、minify-js打包壓縮js代碼、內聯html資源(將css和需要inline的js文件寫入html文件)、復制圖片資源、html、js資源至輸出路徑。

4、更新工程依賴模塊(bid update)：

由于該發(fā)明的功能在不斷添加，引用的依賴也會越來越多，為了及時能夠使用到最新的功能，并確保需代碼引用的依賴能夠正常工作，需要為該發(fā)明提供依賴更新模塊。

用戶可以通過bid update命令對所需依賴進行更新。

5、其他工具模塊(bid iconfont)：

通過nodejs，可以將ttf或者iconfont字體文件base64，節(jié)約線上字體加載請求，提高頁面性能及效率。

以上所述是本發(fā)明的優(yōu)選實施方式，應當指出，對于本技術領域的普通技術人員來說，在不脫離本發(fā)明所述原理的前提下，還可以作出若干改進和潤飾，這些改進和潤飾也應視為本發(fā)明的保護范圍。