一種前端工程自動化構建系統的制作方法

本發明涉及前端開發領域，特別是涉及一種前端工程自動化構建系統。

背景技術：

隨著前端技術的發展，前端代碼的邏輯和交互效果越來越復雜，需要對前端工程中的代碼進行構建，從而實現工程的開發管理，進而向用戶展示豐富的前端界面。現有技術是通過人工的方式來實現工程的開發管理，人為的對工程進行構建，但是人工的方式容易出錯，而且工作效率低下。

因此，如何提供一種解決上述技術問題的方案是本領域技術人員目前需要解決的問題。

技術實現要素：

本發明的目的是提供一種前端工程自動化構建系統，在獲取到用戶創建的工程后能夠實現對工程自動進行構建，不僅避免了人工方式容易出錯的問題，還提高了工作效率；另外，本發明還適用于對多個工程并行開發，在單個工程出問題的情況下，不影響其他工程，大大的提高了工程開發管理的效率。

為解決上述技術問題，本發明提供了一種前端工程自動化構建系統，包括：

獲取單元，用于獲取用戶創建的工程，所述工程包括源代碼目錄和輸出代碼目錄，所述源代碼目錄包括超級文本標記語言html文件；

構建單元，用于構建所述源代碼目錄中的文件；

注入單元，用于將構建后的文件拷貝到所述輸出代碼目錄，并將構建后的相應文件引用注入到所述html文件中。

優選地，所述源代碼目錄中的文件包括javascript文件、層疊樣式表css文件及圖片文件；則所述構建單元具體包括：

javascript文件構建單元，用于合并所述javascript文件，并為其添加版本號；

css文件構建單元，用于編譯所述css文件，并為其添加版本號；

圖片構建單元，用于為所述圖片文件添加版本號。

優選的，在合并所述javascript文件之后，為其添加版本號之前，所述javascript文件構建單元還用于壓縮所述javascript文件。

優選的，在編譯所述css文件之后，為其添加版本號之前，所述css文件構建單元還用于壓縮所述css文件。

優選的，所述構建單元為自動化構建工具gulp。

優選的，所述構建單元為自動化構建工具grunt。

優選的，當所述工程為多個且各個所述工程中的源代碼目錄中的文件構建完成后，所述將構建后的相應文件引用注入到所述html文件中之前，所述注入單元還用于拷貝各個所述工程的輸出代碼目錄中的代碼，將其合并到一個目錄中。

優選的，所述工程還包括測試代碼目錄，所述源代碼目錄中的文件包括javascript文件、css文件及圖片文件，則：

所述構建單元包括css文件構建單元，用于編譯所述css文件；

所述注入單元還用于將所述javascript文件、所述圖片文件及編譯后的所述css文件拷貝到所述輸出代碼目錄，并將所述javascript文件及編譯后的所述css文件引用注入到所述html文件中；還用于將所述測試代碼目錄中的代碼注入到所述html文件中；

監聽單元，用于在啟動本地服務后，開啟源代碼和測試代碼監聽，若所述源代碼和/或所述測試代碼變動時，將變動代碼拷貝到所述輸出代碼目錄中，并重啟本地服務。

本發明提供了一種前端工程自動化構建系統，包括獲取單元，用于獲取用戶創建的工程，工程包括源代碼目錄和輸出代碼目錄，源代碼目錄包括超級文本標記語言html文件；構建單元，用于構建源代碼目錄中的文件；注入單元，用于將構建后的文件拷貝到輸出代碼目錄，并將構建后的相應文件引用注入到html文件中。

可見，本發明在獲取到用戶創建的工程后能夠實現對工程自動進行構建，不僅避免了人工方式容易出錯的問題，還提高了工作效率；另外，本發明還適用于對多個工程并行開發，在單個工程出問題的情況下，不影響其他工程，大大的提高了工程開發管理的效率。

附圖說明

為了更清楚地說明本發明實施例中的技術方案，下面將對現有技術和實施例中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發明的一些實施例，對于本領域普通技術人員來講，在不付出創造性勞動的前提下，還可以根據這些附圖獲得其他的附圖。

圖1為本發明提供的一種前端工程自動化構建系統的結構示意圖；

圖2為本發明提供的另一種前端工程自動化構建系統的結構示意圖。

具體實施方式

本發明的核心是提供一種前端工程自動化構建系統，在獲取到用戶創建的工程后能夠實現對工程自動進行構建，不僅避免了人工方式容易出錯的問題，還提高了工作效率；另外，本發明還適用于對多個工程并行開發，在單個工程出問題的情況下，不影響其他工程，大大的提高了工程開發管理的效率。

為使本發明實施例的目的、技術方案和優點更加清楚，下面將結合本發明實施例中的附圖，對本發明實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例是本發明一部分實施例，而不是全部的實施例。基于本發明中的實施例，本領域普通技術人員在沒有做出創造性勞動前提下所獲得的所有其他實施例，都屬于本發明保護的范圍。

如圖1所示，圖1為本發明提供的一種前端工程自動化構建系統的結構示意圖，包括：

獲取單元1，用于獲取用戶創建的工程，工程包括源代碼目錄和輸出代碼目錄，源代碼目錄包括超級文本標記語言html文件；

在實際應用中，本發明提供的前端工程自動化構建系統運行在node.js中，node.js是一個基于chromejavascript建立的平臺。用戶在node.js中創建工程后，獲取單元1將獲取用戶創建的工程，工程包括源代碼目錄和輸出代碼目錄，源代碼目錄中存放著各個文件的源代碼，輸出代碼目錄中存放著各個文件經過構建后的代碼，其中，源代碼目錄中包括html(hypertextmarkuplanguage，超級文本標記語言)文件，html文件能夠提供網頁的信息以及網頁的具體內容，結合其他的文件能夠創造出豐富的前端界面。

構建單元2，用于構建源代碼目錄中的文件；

源代碼目錄中除了html文件外，還包含其他的文件，構建單元2根據源代碼目錄中包含的文件設置有相應的子構建單元，對源代碼目錄中的文件進行相應的構建操作，從而完成對工程中代碼的編譯以及其它相關的操作。具體的，以構建單元2中的css(cascadingstylesheets，層疊樣式表)文件構建單元為例，css文件構建單元編譯源代碼目錄中css文件的代碼，并為css文件添加版本號，完成對工程源代碼目錄中css文件的代碼的編譯以及css文件版本號的添加。在實際應用中，構建單元2可以應用于產品交付的構建，還可以應用于產品開發的構建，這里不做限定。

注入單元3，用于將構建后的文件拷貝到輸出代碼目錄，并將構建后的相應文件引用注入到html文件中。

具體的，構建后的文件可以包括javascript文件、css文件及圖片文件，其中，javascript是一種直譯式腳本語言，用于為html網頁增加動態功能，css是一種用來表現html或者xml(extensiblemarkuplanguage，可擴展標記語言)文件樣式的計算機語言，用于修飾html網頁。注入單元3將構建后的文件拷貝到輸出代碼目錄，完成對工程中代碼的拷貝；注入單元3將構建后的javascript文件和css文件引用注入到html文件中，完成對工程中代碼的引用。

另外，獲取單元1在獲取到用戶創建的工程后，構建單元2和注入單元3會自動進行相應操作，從而實現工程的自動構建。

可見，本發明在獲取到用戶創建的工程后能夠實現對工程自動進行構建，不僅避免了人工方式容易出錯的問題，還提高了工作效率；另外，本發明還適用于對多個工程并行開發，在單個工程出問題的情況下，不影響其他工程，大大的提高了工程開發管理的效率。

作為一種優選的實施例，源代碼目錄中的文件包括javascript文件、層疊樣式表css文件及圖片文件；則構建單元具體包括：

javascript文件構建單元，用于合并javascript文件，并為其添加版本號；

css文件構建單元，用于編譯css文件，并為其添加版本號；

圖片構建單元，用于為圖片文件添加版本號。

具體的，合并javascript文件能夠減少網頁http(hypertexttransferprotocol，超文本傳輸協議)的請求次數，提高網頁的打開速度；編譯css文件不僅能夠檢查css文件中的代碼是否出錯，還能夠將css文件中的源代碼翻譯成前端網頁所需的目標代碼；為源代碼目錄中的各個文件添加版本號是為了區別不同的版本，方便后期維護管理。另外，源代碼目錄中的文件除了可以包括上述文件外，還可以包括音頻文件和/或視頻文件，這里不做限定。

作為一種優選的實施例，在合并javascript文件之后，為其添加版本號之前，javascript文件構建單元還用于壓縮javascript文件。

作為一種優選的實施例，在編譯css文件之后，為其添加版本號之前，css文件構建單元還用于壓縮css文件。

具體的，壓縮javascript文件和css文件能夠減少代碼的占用空間，有利于代碼的傳輸，增強了代碼的加密性，提高了網頁的加載速度。

作為一種優選的實施例，構建單元為自動化構建工具gulp。

作為一種優選的實施例，構建單元為自動化構建工具grunt。

具體的，gulp和grunt均是前端自動化構建工具，能夠自動完成對工程的代碼的編譯、拷貝、引用的工作。其中，gulp具有簡潔易用、易于配置的特點，grunt具有功能完善、使用高效的特點。

作為一種優選的實施例，當工程為多個且各個工程中的源代碼目錄中的文件構建完成后，將構建后的相應文件引用注入到html文件中之前，注入單元還用于拷貝各個工程的輸出代碼目錄中的代碼，將其合并到一個目錄中。

在實際應用中，一個大的工程可以拆分成多個子工程進行開發管理，各個子工程之間是相互獨立、互不影響的，各個子工程的源代碼目錄中的文件構建完成后，注入單元拷貝各個子工程的輸出代碼目錄中的代碼，并將其合并到一個目錄中，完成子工程的集成，從而到達工程并行開發的目的。

作為一種優選的實施例，如圖2所示，圖2為本發明提供的另一種前端工程自動化構建系統的結構示意圖，工程還包括測試代碼目錄，源代碼目錄中的文件包括javascript文件、css文件及圖片文件；則：

構建單元2包括css文件構建單元，用于編譯css文件；

注入單元3還用于將javascript文件、圖片文件及編譯后的css文件拷貝到輸出代碼目錄，并將javascript文件及編譯后的css文件引用注入到html文件中；還用于將測試代碼目錄中的代碼注入到html文件中；

監聽單元4，用于在啟動本地服務后，開啟源代碼和測試代碼監聽，若源代碼和/或測試代碼變動時，將變動代碼拷貝到輸出代碼目錄中，并重啟本地服務。

在對產品開發構建時，工程還包括測試代碼目錄，需要將測試代碼目錄中的代碼注入到html文件中。為了簡潔快速的對工程進行測試，構建單元2只編譯源代碼目錄中的css文件，注入單元3將javascript文件、圖片文件及編譯后的css文件拷貝到輸出代碼目錄，將javascript文件及編譯后的css文件引用注入到html文件中，完成對工程中代碼的編譯、拷貝及引用。啟動本地服務后，對源代碼和測試代碼進行監聽，當兩者中任一個或者兩者都有變化時，將變動的代碼拷貝到輸出代碼目錄中，并重啟本地服務，能夠在前端界面中直觀的看到變動的代碼產生的效果。

本說明書中各個實施例采用遞進的方式描述，每個實施例重點說明的都是與其他實施例的不同之處，各個實施例之間相同相似部分互相參見即可。對于實施例公開的裝置而言，由于其與實施例公開的方法相對應，所以描述的比較簡單，相關之處參見方法部分說明即可。

對所公開的實施例的上述說明，使本領域專業技術人員能夠實現或使用本發明。對這些實施例的多種修改對本領域的專業技術人員來說將是顯而易見的，本文中所定義的一般原理可以在不脫離本發明的精神或范圍的情況下，在其他實施例中實現。因此，本發明將不會被限制于本文所示的這些實施例，而是要符合與本文所公開的原理和新穎特點相一致的最寬的范圍。