本發(fā)明涉及一種通過配置文件來控制web前端發(fā)布的方法與系統(tǒng)，尤其涉及一種互聯(lián)網(wǎng)開發(fā)技術(shù)，web前端技術(shù)領(lǐng)域的方法與系統(tǒng)。

背景技術(shù)：

現(xiàn)在前端開發(fā)部署環(huán)境的相關(guān)技術(shù)有很多，比如： grunt，gulp， webpack等等。目前互聯(lián)網(wǎng)行業(yè)前端領(lǐng)域用以上三種的最多，目前使用這三種技術(shù)開發(fā)出來的前端部署環(huán)境基本固定的步驟：編寫源代碼并調(diào)試開發(fā)環(huán)境，生成html格式文件并在文件內(nèi)部設(shè)置相對路徑或者固定的cnd路徑，接著對源文件進(jìn)行編譯、校驗、壓縮的操作形成待發(fā)布文件，最后選擇目標(biāo)發(fā)布平臺進(jìn)行web前端發(fā)布。

采用該方式發(fā)布需要將文件的最終發(fā)布路徑固定在源文件內(nèi)，即，一旦文件形成并經(jīng)過后續(xù)處理步驟形成待發(fā)布文件后，該文件的路徑就無法在被改變，而目前的發(fā)布平臺很多，各個平臺對文件路徑設(shè)置的要求也不一樣。如云主機(jī)，在云端發(fā)布，文件路徑多用cdn路徑；企業(yè)機(jī)房的服務(wù)器，在本地發(fā)布；獨立網(wǎng)絡(luò)環(huán)境無法與公網(wǎng)相通，則本地文件路徑。這種固定地址格式設(shè)置同時在多個平臺發(fā)布產(chǎn)品或者從一個平臺換到另一個平臺發(fā)布的情況帶了很大的困擾，通常需要重新修改源代碼，生成新的發(fā)布文件，極為不便。

技術(shù)實現(xiàn)要素：

針對目前web前端發(fā)布中存在的上述問題，本發(fā)明一種通過配置文件來控制web前端發(fā)布的方法與系統(tǒng)，提出一種通過配置文件來設(shè)置文件地址的方式來適配不同發(fā)布平臺的方法與系統(tǒng)。采用本發(fā)明可以實現(xiàn)在不同的發(fā)布環(huán)境無需修改源代碼文件中的固定路徑而只需修改對應(yīng)的配置文件即可批量設(shè)置文件路徑，大大減少了不同發(fā)布環(huán)境帶來的代碼修改工作，有效提高了開發(fā)效率并顯著縮短跨平臺web前端發(fā)布的時間。

本發(fā)明解決其技術(shù)問題所采用的技術(shù)方案包括以下步驟：

項目開發(fā)步驟，配置調(diào)試開發(fā)環(huán)境nodejs，并在所述開發(fā)環(huán)境上編寫代碼文件和路徑配置文件并對所述文件編譯、調(diào)試、修改和校驗形成最終代碼文件和路徑配置文件。

優(yōu)選的，所述項目開發(fā)步驟中，所述配置文件根據(jù)發(fā)布平臺的差異包括Saas配置文件、獨立服務(wù)器配置文件和開發(fā)環(huán)境配置文件。

優(yōu)選的，所述項目開發(fā)步驟中，所述配置文件根據(jù)發(fā)布要求，可以是一個或者多個，以滿足在不同發(fā)布平臺發(fā)布的需求。

項目部署步驟，對源代碼文件進(jìn)行資源重組和整合得到待發(fā)布文件。

Webpack處理源碼步驟，將待發(fā)布文件轉(zhuǎn)換成EJS文件，并將文件路徑替換成變量代碼。

優(yōu)選的，所述Webpack處理源碼步驟，包括采用EJS模板技術(shù)將源代碼轉(zhuǎn)換成EJS文件、設(shè)置路徑配置變量和替換源文件中的固定文件路徑。

優(yōu)選的，所述替換源文件中的固定文件路徑需要編寫代碼來實現(xiàn)所述替換過程，所述Webpack處理源碼步驟中，所述代碼將在發(fā)布過程中引導(dǎo)解析器利用webpack技術(shù)查找指定的配置文件，讀取配置文件中的最終路徑來替換所述路徑變量值。

web前端發(fā)布步驟，讀取EJS文件，并按照路徑變量代碼加載指定配置文件，獲得文件最終路徑，形成發(fā)布文件。

優(yōu)選的，所述web前端發(fā)布步驟中，讀取EJS文件是指采用EJS解析器，解析所述待發(fā)布文件轉(zhuǎn)換形成的EJS文件。

優(yōu)選的，所述web前端發(fā)布步驟中，所述解析所述待發(fā)布文件轉(zhuǎn)換形成的EJS文件過程需要讀取讀取路徑配置代碼，根據(jù)路徑配置代碼加載指定的配置文件，根據(jù)所述配置文件將待發(fā)布文件中的路徑變量替換成最終路徑值，從而生成可發(fā)布的html文件。

本發(fā)明還公開了一種通過配置文件來控制web前端發(fā)布的系統(tǒng)，該系統(tǒng)包括以下子系統(tǒng)：

項目開發(fā)子系統(tǒng)，用于提供代碼開發(fā)環(huán)境，并提供對項目代碼源文件和配置文件的編譯、調(diào)試、校驗等功能。

項目部署子系統(tǒng)，用于對項目代碼源文件和配置文件進(jìn)行資源整合和重組。

Webpack處理源碼子系統(tǒng)，采用EJS模板技術(shù)將項目代碼源文件轉(zhuǎn)換成EJS文件，并提供對所述EJS文件進(jìn)行固定路徑替換功能。

優(yōu)選的，所述Webpack處理源碼子系統(tǒng)中，所述固定路徑替換是指將所述EJS文件中的固定路徑替換成路徑變量，并編寫代碼實現(xiàn)該替換過程。

web前端發(fā)布子系統(tǒng)，用于將待發(fā)布文件中的路徑變量替換成最終發(fā)布路徑，形成最終發(fā)布文件。

優(yōu)選的，所述web前端發(fā)布子系統(tǒng)中，所述替換成最終發(fā)布路徑包括，所述子系統(tǒng)通過解析所述EJS文件，并加載對應(yīng)的路徑配置文件替換所述EJS文件中的路徑變量，形成最終發(fā)布文件。

優(yōu)選的，所述web前端發(fā)布子系統(tǒng)中，所述加載對應(yīng)的路徑配置文件，是指通過解析路徑變量代碼來確定選擇的配置文件。

優(yōu)選的，所述web前端發(fā)布子系統(tǒng)中，所述替換所述EJS文件中的路徑變量，包括解析所述配置文件，根據(jù)所述路徑變量代碼獲取文件最終路徑，并采用該路徑替換所述EJS文件中的路徑變量代碼，形成最終可發(fā)布文件。

采用上述技術(shù)方案，本發(fā)明具有以下優(yōu)點：

本發(fā)明涉及一種通過配置文件來控制web前端發(fā)布的方法，通過配置開發(fā)環(huán)境、編寫項目源代碼和配置文件并進(jìn)行特定處理步驟處理得到待發(fā)布文件，然后采用EJS模板技術(shù)將待發(fā)布文件轉(zhuǎn)換成EJS文件并將所述固定文件最終路徑更換成可配置變量，編寫可配置變量的實現(xiàn)代碼，進(jìn)一步通過webpack讀取配置變量的實現(xiàn)代碼來讀取文件路徑變量，并讀取設(shè)置文件最終路徑的配置文件最后通過EJS解析技術(shù)解析待發(fā)布EJS文件，按照配置文件設(shè)置的文件最終路徑發(fā)布文件。采用將web前端發(fā)布系統(tǒng)中的處理源碼環(huán)節(jié)中待發(fā)布文件的固定路徑修改成可配置變量的方式，并編寫特定配置代碼，使web前端發(fā)布過程中文件最終路徑可配置，通過讀取特定的配置文件，可實現(xiàn)對文件最終路徑的獲取，形成最終可發(fā)布文件，不同的發(fā)布環(huán)境無需修改源代碼文件中的固定路徑而只需修改對應(yīng)的配置文件即可批量設(shè)置文件路徑，大大減少了不同發(fā)布環(huán)境帶來的代碼修改工作，有效提高了開發(fā)效率并顯著縮短了跨平臺web前端發(fā)布的時間。

附圖說明

圖1為本發(fā)明較佳實施方式的通過配置文件來控制web前端發(fā)布的方法與系統(tǒng)的示意圖。

圖2為本發(fā)明較佳實施方式的通過配置文件來控制web前端發(fā)布的方法與系統(tǒng)的系統(tǒng)結(jié)構(gòu)圖。

圖3為本發(fā)明較佳實施方式的通過配置文件來控制web前端發(fā)布的方法與系統(tǒng)的詳細(xì)步驟流程圖。

具體實施方式

下面將結(jié)合本發(fā)明實施例中的附圖，對本發(fā)明實施例中的技術(shù)方案進(jìn)行清楚、完整的描述，顯然，所描述的實施例僅僅是本發(fā)明的一個實施例，而不是全部實施例?；诒景l(fā)明中的實施例，本領(lǐng)域的一般技術(shù)人員在沒有做出創(chuàng)造性勞動的前提下所獲得的其他實施例，都屬于本發(fā)明保護(hù)的范圍。

本發(fā)明公開了通過配置文件來控制web前端發(fā)布的方法，參見圖1所示，該方法包括：

步驟S101：配置開發(fā)環(huán)境、編寫項目源代碼和配置文件并進(jìn)行特定處理步驟處理得到待發(fā)布文件;

步驟S102：采用EJS模板技術(shù)將待發(fā)布文件轉(zhuǎn)換成EJS文件并將所述固定文件最終路徑更換成可配置變量，并編寫實現(xiàn)代碼;

步驟S103：通過webpack讀取配置變量的實現(xiàn)代碼來讀取文件路徑變量，并讀取設(shè)置文件最終路徑的配置文件;

步驟S104：通過EJS解析技術(shù)解析待發(fā)布EJS文件，按照配置文件設(shè)置的文件最終路徑發(fā)布文件。

本實施例中，本發(fā)明涉及一種通過配置文件來控制web前端發(fā)布的方法，所述方法通過配置開發(fā)環(huán)境、編寫項目源代碼和路徑設(shè)置的配置文件并通過檢驗、壓縮、合并等處理步驟得到待發(fā)布文件，利用EJS模板技術(shù)將待發(fā)布文件轉(zhuǎn)換成EJS文件并將所述文件固定最終路徑更換成可配置變量，編寫所述可配置變量實現(xiàn)代碼，通過webpack讀取所述配置變量的實現(xiàn)代碼來讀取文件路徑變量，并讀取設(shè)置文件最終路徑的配置文件最后通過EJS解析技術(shù)解析待發(fā)布EJS文件，按照配置文件設(shè)置的文件最終路徑發(fā)布文件。

可見，在本實施例中采用將web前端發(fā)布系統(tǒng)中的處理源碼環(huán)節(jié)中待發(fā)布文件的固定路徑修改成可配置變量的方式，并編寫特定配置代碼，使web前端發(fā)布過程中文件最終路徑可配置，通過讀取特定的配置文件，可實現(xiàn)對文件最終路徑的獲取，形成最終可發(fā)布文件，不同的發(fā)布環(huán)境無需修改源代碼文件中的固定路徑而只需修改對應(yīng)的配置文件即可批量設(shè)置文件路徑，大大減少了不同發(fā)布環(huán)境帶來的代碼修改工作，有效提高了開發(fā)效率并顯著縮短了跨平臺web前端發(fā)布的時間。

本發(fā)明實施例公開了一種通過配置文件來控制web前端發(fā)布的系統(tǒng)，參見圖2、3，相對上一實施例，本實施例對技術(shù)方案作了進(jìn)一步的說明和優(yōu)化。具體的，本實施例中通過配置文件來控制web前端發(fā)布的系統(tǒng)包含以下子系統(tǒng)：

S20：項目開發(fā)子系統(tǒng)。

優(yōu)選的，通過對開發(fā)環(huán)境nodejs的調(diào)試配置，并在所述平臺上完成代碼編輯工作，經(jīng)過編譯、校驗等處理步驟后得到待發(fā)布html格式產(chǎn)品文件。

優(yōu)選的，除源代碼編寫外，還需完成步驟S201對路徑配置文件進(jìn)行編寫和調(diào)試，所述文件編寫要求滿足指定的發(fā)布平臺對發(fā)布文件提出的路徑設(shè)置要求。

優(yōu)選的，根據(jù)不同的發(fā)布平臺，需要編寫不同的配置文件，所述待發(fā)布html格式文件可以有一個或者多個配置文件，實現(xiàn)在一個或者多個平臺上進(jìn)行web前端發(fā)布。

S21：項目部署子系統(tǒng)。

優(yōu)選的，對所述html文件按照發(fā)布平臺已經(jīng)項目屬性的要求進(jìn)行壓縮、校驗、合并等處理步驟得到待發(fā)布文件。

S22：Webpack處理源碼子系統(tǒng)。

優(yōu)選的，通過EJS模板技術(shù)，對所述待發(fā)布文件進(jìn)行模板化處理得到EJS文件S221，接著執(zhí)行步驟S222編寫路徑變量的配置代碼，通過webpack技術(shù)執(zhí)行步驟S223查找并讀取所述EJS文件S221中的文件固定路徑，將所述固定路徑替換成S222步驟中的路徑變量配置代碼。

優(yōu)選的，S222中針對應(yīng)用要求不同，需要編寫一個或者多個路徑變量配置代碼，實現(xiàn)引導(dǎo)解析器對一個或多個S201中所述的配置文件讀取。

S23：前端發(fā)布子系統(tǒng)。

優(yōu)選的，通過EJS解析技術(shù)，解析EJS文件S221，讀取并解析S222中所述的路徑變量設(shè)置代碼，根據(jù)所述代碼要求，讀取S201中所述配置文件，通過解析所述配置文件，獲取文件最終路徑，并用所述路徑值替換S222中所述的路徑變量設(shè)置代碼形成發(fā)布文件，發(fā)布到指定平臺。

優(yōu)選的，根據(jù)發(fā)布要求的不同，需要讀取一個或者多個所述配置文件，實現(xiàn)在指定平臺或者跨平臺同時發(fā)布。

綜上所述，通過配置、調(diào)試開發(fā)環(huán)境，實現(xiàn)在所述環(huán)境上代碼源文件和設(shè)置文件路徑的配置文件編寫，對代碼源文件及配置文件進(jìn)行校驗、編譯等操作得到html格式產(chǎn)品文件和最終配置文件，對代碼源文件進(jìn)行合并、校驗、壓縮的步驟得到待發(fā)布源文件，接著采用EJS模板技術(shù)，將待發(fā)布源文件轉(zhuǎn)化成EJS文件，查找并讀取文件固定路徑值，通過編寫路徑變量設(shè)置代碼來替換所述固定路徑值完成對源代碼的處理工作，在web前端發(fā)布過程中采用EJS解析器解析所述EJS文件，并根據(jù)所述路徑變量設(shè)置代碼加載指定配置文件，解析并讀取配置文件中的最終文件路徑，采用所述路徑替換所述路徑變量設(shè)置代碼得到發(fā)布文件，實現(xiàn)在指定平臺上的web前端發(fā)布。相比傳統(tǒng)web前端發(fā)布，本實施例采用將web前端發(fā)布系統(tǒng)中的處理源碼環(huán)節(jié)中待發(fā)布文件的固定路徑修改成可配置變量的方式，并編寫特定配置代碼，使web前端發(fā)布過程中文件最終路徑可配置，通過讀取特定的配置文件，可實現(xiàn)對文件最終路徑的獲取，形成最終可發(fā)布文件，不同的發(fā)布環(huán)境無需修改源代碼文件中的固定路徑而只需修改對應(yīng)的配置文件即可批量設(shè)置文件路徑，大大減少了不同發(fā)布環(huán)境帶來的代碼修改工作，有效提高了開發(fā)效率并顯著縮短了跨平臺web前端發(fā)布的時間。

以上所述僅為舉例性，而非為限制性。本領(lǐng)域的技術(shù)人員可以對發(fā)明進(jìn)行各種改動和變型而不脫離本發(fā)明的精神和范圍。這樣，倘若本發(fā)明的這些修改和變型屬于本發(fā)明權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則本發(fā)明也意圖包括這些改動和變型在內(nèi)。