Web前端自動化開發(fā)方法與系統(tǒng)的制作方法
【專利說明】
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及軟件開發(fā)技術(shù)，尤其涉及WEB前端自動化開發(fā)方法與系統(tǒng)。
【【背景技術(shù)】】
[0002]在傳統(tǒng)的WEB前端頁面加載的資源文件多，向服務(wù)器發(fā)送的請求數(shù)多，占用大量的服務(wù)器資源，頁面加載慢，用戶體驗不好。比如頁面有模塊a、b、C，其對應(yīng)使用了 a.css,b.css、c.css以及a.js、b.js、c.js，引用多個CSS和JS文件意味著頁面加載的時候會發(fā)送更多的資源請求到服務(wù)器，這樣會增加服務(wù)器的連接數(shù)和占用更多的服務(wù)器帶寬，從而導(dǎo)致WEB前端頁面加載慢，影響用戶的使用。目前采用的解決方案是資源文件合并壓縮，但手動合并壓縮過程繁瑣，容易出錯。
【
【發(fā)明內(nèi)容】
】
[0003]本發(fā)明要解決的技術(shù)問題是提供一種WEB前端自動化開發(fā)方法與系統(tǒng)，解決現(xiàn)有技術(shù)中存在的WEB前端開發(fā)效率低，占用服務(wù)器資源多，用戶體驗不好的缺陷。
[0004]為解決上述技術(shù)問題，本發(fā)明提供以下技術(shù)方案。
[0005]一方面，本發(fā)明提供一種WEB前端自動化開發(fā)方法。
[0006]所述WEB前端自動化開發(fā)方法包括如下步驟:
[0007]獲取編寫的編碼文件；
[0008]在監(jiān)測到所述編碼文件中的內(nèi)容發(fā)生變化時，自動測試所述編碼文件；
[0009]在所述編碼文件測試通過時，壓縮測試通過的所述編碼文件，并構(gòu)建版本信息；
[0010]發(fā)送壓縮后的所述編碼文件和版本信息至代碼倉庫，以供發(fā)布。
[0011 ] 在一些實施例中，在獲取編寫的編碼文件的步驟之前，所述WEB前端自動化開發(fā)方法還包括如下步驟:
[0012]基于Node, js和Grunt構(gòu)建WEB項目的目錄，并初始化所述WEB項目。
[0013]在一些實施例中，在獲取編寫的編碼文件的步驟之前，所述WEB前端自動化開發(fā)方法還包括如下步驟:
[0014]預(yù)先生成配置文件，所述配置文件包括預(yù)設(shè)的測試規(guī)則和/或合并文件信息。
[0015]在一些實施例中，所述在監(jiān)測到所述編碼文件中的內(nèi)容發(fā)生變化時，自動測試所述編碼文件的步驟包括:
[0016]在監(jiān)測到所述編碼文件發(fā)生變化時，根據(jù)預(yù)設(shè)的測試規(guī)則對所述編碼文件進行語法測試。
[0017]在一些實施例中，所述在所述編碼文件測試通過時，壓縮測試通過的所述編碼文件，并構(gòu)建版本信息的步驟包括:
[0018]在測試通過時，讀取并合并需要合并的編碼文件；
[0019]將合并后的所述編碼文件寫入預(yù)設(shè)的合并文件中；
[0020]采用混淆壓縮的方式對所述合并文件中的內(nèi)容進行壓縮；
[0021]根據(jù)壓縮后的所述編碼文件構(gòu)建版本信息。
[0022]另一方面，本發(fā)明提供一種WEB前端自動化開發(fā)系統(tǒng)。
[0023]所述WEB前端自動化開發(fā)系統(tǒng)包括:
[0024]獲取模塊，用于獲取編寫的編碼文件；
[0025]自動測試模塊，用于在監(jiān)測到所述編碼文件中的內(nèi)容發(fā)生變化時，自動測試所述編碼文件；
[0026]壓縮模塊，用于在所述編碼文件測試通過時，壓縮測試通過的所述編碼文件，并構(gòu)建版本信息；
[0027]發(fā)送模塊，用于發(fā)送壓縮后的所述編碼文件和版本信息至代碼倉庫，以供發(fā)布。
[0028]在一些實施例中，所述WEB前端自動化開發(fā)系統(tǒng)還包括:
[0029]項目構(gòu)建模塊，用于基于Node, js和Grunt構(gòu)建WEB項目的目錄，并初始化所述WEB項目ο
[0030]在一些實施例中，所述WEB前端自動化開發(fā)系統(tǒng)還包括:
[0031]預(yù)設(shè)模塊，用于預(yù)先生成配置文件，所述配置文件包括預(yù)設(shè)的測試規(guī)則和/或合并文件信息。
[0032]在一些實施例中，所述自動測試模塊具體用于在監(jiān)測到所述編碼文件發(fā)生變化時，根據(jù)預(yù)設(shè)的測試規(guī)則對所述編碼文件進行語法測試。
[0033]在一些實施例中，所述壓縮模塊包括:
[0034]合并子模塊，用于在測試通過時，讀取并合并需要合并的編碼文件；
[0035]寫入子模塊，用于將合并后的所述編碼文件寫入預(yù)設(shè)的合并文件中；
[0036]壓縮子模塊，采用混淆壓縮的方式對所述合并文件中的內(nèi)容進行壓縮；
[0037]版本構(gòu)建子模塊，用于根據(jù)壓縮后的所述編碼文件構(gòu)建版本信息。
[0038]本發(fā)明的有益效果在于通過獲取編寫的編碼文件，在監(jiān)測到所述編碼文件中的內(nèi)容發(fā)生變化時，自動測試所述編碼文件，提高了 WEB前端開發(fā)效率，在所述編碼文件測試通過時，壓縮測試通過的所述編碼文件，并構(gòu)建版本信息，減少了服務(wù)器資源的占用，最后發(fā)送壓縮后的所述編碼文件和版本信息至代碼倉庫，以供發(fā)布，優(yōu)化了 WEB前端頁面性能，提高了用戶的體驗度。本發(fā)明解決了現(xiàn)有技術(shù)中存在的WEB前端開發(fā)效率低，占用服務(wù)器資源多，用戶體驗不好的缺陷。
【【附圖說明】】
[0039]圖1為本發(fā)明WEB前端自動化開發(fā)方法的第一實施例流程示意圖；
[0040]圖2為本發(fā)明WEB前端自動化開發(fā)方法的第二實施例流程示意圖；
[0041]圖3為本發(fā)明實施例中步驟S30的細化流程示意圖；
[0042]圖4為本發(fā)明WEB前端自動化開發(fā)系統(tǒng)的第一實施例功能模塊示意圖；
[0043]圖5為本發(fā)明WEB前端自動化開發(fā)系統(tǒng)的第二實施例功能模塊示意圖；
[0044]圖6為本發(fā)明壓縮模塊的功能子模塊示意圖。
【【具體實施方式】】
[0045]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚明白，以下結(jié)合附圖及實施例，對本發(fā)明進行進一步詳細說明。應(yīng)當理解，此處所描述的具體實施例僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0046]實施例1
[0047]實施例1為本發(fā)明提供的WEB前端自動化開發(fā)方法的第一實施例。參照圖1，圖1為本發(fā)明WEB前端自動化開發(fā)方法的第一實施例流程示意圖。
[0048]所述WEB前端自動化開發(fā)方法包括如下步驟:
[0049]SlO:獲取編寫的編碼文件；
[0050]具體地，本發(fā)明實施例用于WEB前端開發(fā)，為實現(xiàn)WEB前端頁面的某些功能，程序員常常需要編寫多個css、JS等編碼文件，本步驟用于獲取程序員編寫的編碼文件，獲取的方式可以是預(yù)先將編碼文件存儲于預(yù)設(shè)的路徑中，程序直接從預(yù)設(shè)的路徑讀取所述編碼文件，也可以以瀏覽的方式查找到存放所述編碼文件的路徑后再讀取所述編碼文件。
[0051]S20:在監(jiān)測到所述編碼文件中的內(nèi)容發(fā)生變化時，自動測試所述編碼文件；
[0052]具體地，該步驟的實現(xiàn)方式為，監(jiān)測在預(yù)設(shè)的時間周期內(nèi)編碼文件的內(nèi)容是否與上個周期相同，若相同，則說明編碼文件沒有被修改，不需要執(zhí)行任何操作，若不同，則說明程序員對該編碼文件進行了修改或升級，此時，需要測試編碼文件是否符合編碼要求，對修改后的編碼文件進行自動測試；也可調(diào)用Grunt的插件Grunt-contrib-watch對編碼文件進行監(jiān)測，當監(jiān)測到編碼文件中的內(nèi)容發(fā)生變化時，說明編碼人員修改了編碼文件，此時需對修改后的編碼文件進行自動測試。在一個實施例中，在監(jiān)測到所述編碼文件發(fā)生變化時，可以根據(jù)預(yù)設(shè)的測試規(guī)則對所述編碼文件進行語法測試。例如可以調(diào)用Grunt的插件Grunt-contrib-jshint對JS編碼文件的語法進行測試。也可以按照編碼規(guī)則自行定義測試規(guī)則，測試的內(nèi)容不局限于語法。還可以是編碼關(guān)鍵字匹配檢查等。
[0053]S30:在所述編碼文件測試通過時，壓縮測試通過的所述編碼文件，并構(gòu)建版本信息;
[0054]具體地，執(zhí)行該步驟時，首先判斷編碼文