一種用于前端開發的可視化發布方法及系統與流程

本發明涉及前端開發可視化發布領域，尤其涉及一種用于前端開發的可視化發布方法及系統。

背景技術：

在工程開發過程中，隨著工程工程越來越多，構建工具因其便捷、高效性逐漸成為一個通用的工具，受到越來越多的開發者的青睞。在使用前端構建工具發布工程的過程中，存在諸多問題，比如配置文件較多，發布效率慢，入門門檻較高，給前端開發的發布帶來了很多不便。

技術實現要素：

本發明所要解決的技術問題是針對現有技術的不足，提供一種用于前端開發的可視化發布方法及系統，目的在于將前端工程發布可視化，減少工程配置文件，避免配置文件雜亂問題，降低前端人員對工具技能的門檻，提高開發效率。

本發明解決上述技術問題的技術方案如下：

一種用于前端開發的可視化發布方法，包括以下步驟：

s1，提供可視化的工程發布配置界面接收用戶提交的前端工程配置文件的源路徑和前端工程的目標發布目錄；

s2，根據用戶提交的配置文件的源路徑獲取配置文件，并根據配置文件調用dos(磁盤操作系統的縮寫，是個人計算機上的一類操作系統)環境下的前端工程發布命令，執行所述前端工程發布命令啟動發布服務將前端工程發布到用戶提交的目標發布目錄，并在目標發布目錄生成前端工程數據；

s3，提供可視化的nginx服務(一種網頁伺服器)配置界面接收用戶提交的前端工程數據源路徑和nginx服務啟動參數，根據所述前端工程數據源路徑和nginx服務啟動參數調用dos環境下的nginx服務啟動命令，執行所述nginx服務啟動命令將加載前端工程數據的nginx服務啟動；

s4，調用瀏覽器從已加載前端工程數據的nginx服務獲取前端工程數據并進行展示。

本發明的有益效果是：通過提供配置界面將前端工程發布操作可視化，利用配置界面統一調用配置文件，與常規發布過程中需要的工程配置文件相比能減少一部分配置文件且能有效避免配置文件雜亂問題，降低前端人員的工具使用技能門檻，提高了開發效率。

在上述技術方案的基礎上，本發明還可以做如下改進：

進一步，所述s2中所述前端工程發布命令包括以下命令模式：觀察預覽模式和上線壓縮模式。

采用上述進一步方案的有益效果是：前端工程發布提供多種模式，在開發測試過程中能節約等待時間，提高開發效率，在上線過程中能節約對服務器資源的占用。

進一步，所述s2中在所述執行前端工程發布命令后，自動保存所述前端工程發布的操作記錄到日志文件中；所述s3中在所述啟動nginx服務后，自動保存所述啟動nginx服務的操作記錄到所述日志文件中。

采用上述進一步方案的有益效果是：采用日志文件記錄工程發布和nginx服務運行過程，方便查找整個發布過程，提高調試效率。

進一步，所述s3中所述nginx服務啟動參數包括：nginx服務啟動端口、反向代理主機ip地址和反向代理端口。

采用上述進一步方案的有益效果是：提供多種nginx服務啟動參數可自定義配置，能高效的啟動多個工程的nginx服務且不易產生沖突，提高開發人員的效率。

進一步，所述s2中所述執行前端工程發布命令前，調用dos環境下的發布服務關閉命令和nginx服務關閉命令，執行所述發布服務關閉命令和nginx服務關閉命令將發布服務和nginx服務關閉。

采用上述進一步方案的有益效果是：解決了多個工程連續發布時的端口沖突問題，使多個工程的發布能夠依次順利進行，發布過程簡潔連貫。

一種用于前端開發的可視化發布系統，包括以下模塊：

發布配置模塊，用于提供可視化的工程發布配置界面接收用戶提交的前端工程配置文件的源路徑和前端工程的目標發布目錄；

工程發布模塊，用于根據用戶提交的配置文件的源路徑獲取配置文件，并根據配置文件調用dos環境下的前端工程發布命令，執行所述前端工程發布命令啟動發布服務將前端工程發布到用戶提交的目標發布目錄，并在目標發布目錄生成前端工程數據；

nginx服務模塊，提供可視化的nginx服務配置界面接收用戶提交的前端工程數據源路徑和nginx服務啟動參數，根據所述前端工程數據源路徑和nginx服務啟動參數調用dos環境下的nginx服務啟動命令，執行所述nginx服務啟動命令將加載前端工程數據的nginx服務啟動；

工程展示模塊，用于調用瀏覽器從已加載前端工程數據的nginx服務獲取前端工程數據并進行展示。

本發明的有益效果是：通過提供配置界面將前端工程發布操作可視化，利用配置界面統一調用配置文件，與常規發布過程中需要的工程配置文件相比能減少一部分配置文件，且能有效避免配置文件雜亂問題，降低前端人員的工具使用技能門檻，提高了開發效率。

在上述技術方案的基礎上，本發明還可以做如下改進：

進一步，所述工程發布模塊中所述前端工程發布命令包括以下命令模式：觀察預覽模式和上線壓縮模式。

采用上述進一步方案的有益效果是：前端工程發布提供多種模式，在開發測試過程中能節約等待時間，提高開發效率，在上線過程中能節約對服務器資源的占用。

進一步，所述工程發布模塊還用于在執行前端工程發布命令后，自動保存所述前端工程發布的操作記錄到日志文件中；所述nginx服務模塊還用于在啟動nginx服務后，自動保存所述啟動nginx服務的操作記錄到所述日志文件中。

采用上述進一步方案的有益效果是：采用日志文件記錄工程發布和nginx服務運行過程，方便查找整個發布過程，提高調試效率。

進一步，所述nginx服務模塊中所述nginx服務啟動參數包括：nginx服務啟動端口、反向代理主機ip地址和反向代理端口。

采用上述進一步方案的有益效果是：提供多種nginx服務啟動參數可自定義配置，能高效的啟動多個工程的nginx服務且不易產生沖突，提高開發人員的效率。

進一步，所述工程發布模塊還用于在執行前端工程發布命令前，調用dos環境下的發布服務關閉命令和nginx服務關閉命令，執行所述發布服務關閉命令和nginx服務關閉命令將發布服務和nginx服務關閉。

采用上述進一步方案的有益效果是：解決了多個工程連續發布時可能產生的端口沖突問題，使多個工程的發布能夠依次順利進行，發布過程簡潔連貫。

附圖說明

圖1為本發明實施例1中一種用于前端開發的可視化發布方法的流程圖；

圖2為本發明實施例2中一種用于前端開發的可視化發布系統的結構框圖。

具體實施方式

以下結合附圖對本發明的原理和特征進行描述，所舉實例只用于解釋本發明，并非用于限定本發明的范圍。

實施例1

如圖1所示，一種用于前端開發的可視化發布方法，包括以下步驟：

s1，提供可視化的工程發布配置界面接收用戶提交的前端工程配置文件的源路徑和前端工程的目標發布目錄；

s2，根據用戶提交的配置文件的源路徑獲取配置文件，并根據配置文件調用dos環境下的前端工程發布命令，執行所述前端工程發布命令啟動發布服務將前端工程發布到用戶提交的目標發布目錄，并在目標發布目錄生成前端工程數據；

s3，提供可視化的nginx服務配置界面接收用戶提交的前端工程數據源路徑和nginx服務啟動參數，根據所述前端工程數據源路徑和nginx服務啟動參數調用dos環境下的nginx服務啟動命令，執行所述nginx服務啟動命令將加載前端工程數據的nginx服務啟動；

s4，調用瀏覽器從已加載前端工程數據的nginx服務獲取前端工程數據并進行展示。

具體的，本方法使用可視化的工程發布配置界面提供用戶選擇待發布的前端工程的配置文件的源路徑，避免了配置文件雜亂的問題。工程發布配置界面可以采用java語言(一種面向對象的編程語言)編寫，根據配置文件使用java調用dos環境下的前端工程發布命令來發布工程，主要命令為：fisrelease(前端工程發布，fis是一種前端工程構建工具)，同理，可視化的nginx服務配置界面也可以采用java語言編寫，nginx服務也是由java調用dos環境下的nginx服務啟動命令來啟動。

本發明通過提供配置界面將前端工程發布操作可視化，利用配置界面統一調用配置文件，與常規發布過程中需要的工程配置文件相比能減少一部分配置文件且能有效避免配置文件雜亂問題，降低前端人員的工具使用技能門檻，提高了開發效率。

進一步，所述s2中所述前端工程發布命令包括以下命令模式：觀察預覽模式和上線壓縮模式。

具體的，前端工程發布的時候，可以選擇觀察預覽模式和上線壓縮模式，觀察預覽模式主要是開發人員測試效果時使用，發布過程快速，節約了開發人員等待的時間，提高了開發效率；上線壓縮模式主要用于實際生產過程中的發布，發布過程中對前端工程數據進行了壓縮，節約了對服務器資源的占用。

該改進中，前端工程發布提供多種模式，在開發測試過程中能節約等待時間，提高開發效率，在上線過程中能節約對服務器資源的占用。

進一步，所述s2中在所述執行前端工程發布命令后，自動保存所述前端工程發布的操作記錄到日志文件中；所述s3中在所述啟動nginx服務后，自動保存所述啟動nginx服務的操作記錄到所述日志文件中。

具體的，前端工程發布的操作記錄和nginx服務的操作記錄都記錄到日志文件中，可以通過集成eclipse(一種跨平臺開源集成開發環境)的log組件(一種用于記錄日志的組件)來實現日志文件的記錄，在遇到故障時能方便對歷史發布過程進行查找以找出故障點。

該改進中，采用日志文件記錄工程發布和nginx服務運行過程，方便查找整個發布過程，提高調試效率。

進一步，所述s3中所述nginx服務啟動參數包括：nginx服務啟動端口、反向代理主機ip地址和反向代理端口。

具體的，nginx服務啟動端口、反向代理主機ip地址以及反向代理端口有默認的配置，開發人員可以按照默認的配置提交，也可以進行自定義設置后進行提交，發布不同的工程可以使用不同的參數，可配置性高，能有效減少發布工程時產生沖突。

該改進中，提供多種nginx服務啟動參數可自定義配置，能高效的啟動多個工程的nginx服務且不易產生沖突，提高開發人員的效率。

進一步，所述s2中所述執行前端工程發布命令前，調用dos環境下的發布服務關閉命令和nginx服務關閉命令，執行所述發布服務關閉命令和nginx服務關閉命令將發布服務和nginx服務關閉。

具體的，前端工程發布前，首先調用dos環境下的命令關閉fis和nginx服務的進程，這樣就避免了在多個工程連續發布時可能導致的端口沖突的問題。

也可以在可視化的nginx服務配置界面設置關閉nginx服務的選項，可以根據參數調用dos環境下的nginx服務關閉命令(nginxstop)來關閉nginx服務。

該改進中，解決了多個工程連續發布時的端口沖突問題，使多個工程的發布能夠依次順利進行，發布過程簡潔連貫。

實施例2

如圖2所示，一種用于前端開發的可視化發布系統，包括以下模塊：

發布配置模塊，用于提供可視化的工程發布配置界面接收用戶提交的前端工程配置文件的源路徑和前端工程的目標發布目錄；

工程發布模塊，用于根據用戶提交的配置文件的源路徑獲取配置文件，并根據配置文件調用dos環境下的前端工程發布命令，執行所述前端工程發布命令啟動發布服務將前端工程發布到用戶提交的目標發布目錄，并在目標發布目錄生成前端工程數據；

nginx服務模塊，提供可視化的nginx服務配置界面接收用戶提交的前端工程數據源路徑和nginx服務啟動參數，根據所述前端工程數據源路徑和nginx服務啟動參數調用dos環境下的nginx服務啟動命令，執行所述nginx服務啟動命令將加載前端工程數據的nginx服務啟動；

工程展示模塊，用于調用瀏覽器從已加載前端工程數據的nginx服務獲取前端工程數據并進行展示。

具體的，本系統的發布配置模塊使用可視化的工程發布配置界面提供用戶選擇待發布的前端工程的配置文件的源路徑，避免了配置文件雜亂的問題。工程發布配置界面可以采用java語言編寫，根據配置文件使用java調用dos環境下的前端工程發布命令來發布工程，主要命令為：fisrelease(前端工程發布，fis是一種前端工程構建工具)，同理，可視化的nginx服務配置界面也可以采用java語言編寫，nginx服務也是由java調用dos環境下的nginx服務啟動命令來啟動。

本發明通過提供配置界面將前端工程發布操作可視化，利用配置界面統一調用配置文件，與常規發布過程中需要的工程配置文件相比能減少一部分配置文件且能有效避免配置文件雜亂問題，降低前端人員的工具使用技能門檻，提高了開發效率。

進一步，所述工程發布模塊中所述前端工程發布命令包括以下命令模式：觀察預覽模式和上線壓縮模式。

具體的，前端工程發布的時候，可以選擇觀察預覽模式和上線壓縮模式，觀察預覽模式主要是開發人員測試效果時使用，發布過程快速，節約了開發人員等待的時間，提高了開發效率；上線壓縮模式主要用于實際生產過程中的發布，發布過程中對前端工程數據進行了壓縮，節約了對服務器資源的占用。

該改進中，前端工程發布提供多種模式，在開發測試過程中能節約等待時間，提高開發效率，在上線過程中能節約對服務器資源的占用。

進一步，所述工程發布模塊還用于在執行前端工程發布命令后，自動保存所述前端工程發布的操作記錄到日志文件中；所述nginx服務模塊還用于在啟動nginx服務后，自動保存所述啟動nginx服務的操作記錄到所述日志文件中。

具體的，前端工程發布的操作記錄和nginx服務的操作記錄都記錄到日志文件中，可以通過集成eclipse(一種跨平臺開源集成開發環境)的log組件(一種用于記錄日志的組件)來實現日志文件的記錄，在遇到故障時能方便對歷史發布過程進行查找以找出故障點。

該改進中，采用日志文件記錄工程發布和nginx服務運行過程，方便查找整個發布過程，提高調試效率。

進一步，所述nginx服務模塊中所述nginx服務啟動參數包括：nginx服務啟動端口、反向代理主機ip地址和反向代理端口。

具體的，nginx服務啟動端口、反向代理主機ip地址以及反向代理端口有默認的配置，開發人員可以按照默認的配置提交，也可以進行自定義設置后進行提交，發布不同的工程可以使用不同的參數，可配置性高，能有效減少發布工程時產生沖突。

該改進中，提供多種nginx服務啟動參數可自定義配置，能高效的啟動多個工程的nginx服務且不易產生沖突，提高開發人員的效率。

進一步，所述工程發布模塊還用于在執行前端工程發布命令前，調用dos環境下的發布服務關閉命令和nginx服務關閉命令，執行所述發布服務關閉命令和nginx服務關閉命令將發布服務和nginx服務關閉。

具體的，前端工程發布前，首先調用dos環境下的命令關閉fis和nginx服務的進程，這樣就避免了在多個工程連續發布時可能導致的端口沖突的問題。

也可以在可視化的nginx服務配置界面設置關閉nginx服務的選項，可以根據參數調用dos環境下的nginx服務關閉命令(nginxstop)來關閉nginx服務。

該改進中，解決了多個工程連續發布時可能產生的端口沖突問題，使多個工程的發布能夠依次順利進行，發布過程簡潔連貫。

以上所述僅為本發明的較佳實施例，并不用以限制本發明，凡在本發明的精神和原則之內，所作的任何修改、等同替換、改進等，均應包含在本發明的保護范圍之內。