網(wǎng)站前端開發(fā)的方法與系統(tǒng)的制作方法
【專利摘要】本發(fā)明公開了一種網(wǎng)站前端開發(fā)的方法與系統(tǒng)，改進了網(wǎng)站前端靜態(tài)資源的編譯優(yōu)化處理方式，將基于Jekins/Huson服務(wù)器的編譯流程改為本地編譯，極大的提升了編譯效率，并且和SVN整合，從而可以隨時提交，實時編譯。同時添加了針對圖片文件的壓縮處理，引用hash值作為圖片版本號，保證了版本號的準確性和唯一性。本發(fā)明的方法與系統(tǒng)針對網(wǎng)站前端開發(fā)流程中的每個步驟實現(xiàn)一個個自動化的任務(wù)，整個工作流基于node.js的Grunt命令行工具，串聯(lián)了網(wǎng)站前端開發(fā)的整個流程，通過本地配置文件的方式，自動化整個流程，方便了流程在團隊間統(tǒng)一、共享和協(xié)作。
【專利說明】網(wǎng)站前端開發(fā)的方法與系統(tǒng)

【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及網(wǎng)絡(luò)開發(fā)【技術(shù)領(lǐng)域】，特別是涉及一種網(wǎng)站前端開發(fā)的方法與系統(tǒng)。

【背景技術(shù)】
[0002]網(wǎng)站前端開發(fā)涉及的工作內(nèi)容相當(dāng)繁雜，因為開發(fā)語言語法松散的特點，在開發(fā)過程中需要代碼檢查排除一部分低級錯誤。為了最優(yōu)化網(wǎng)絡(luò)訪問，需要對前端資源(HTML、CSS、JavaScript、Image)做各種優(yōu)化處理，比如合并文件，壓縮文件等等，發(fā)布后的靜態(tài)資源緩存更新管理，以及和后端服務(wù)器協(xié)同開發(fā)，不同開發(fā)環(huán)境的切換配置。這些繁瑣重復(fù)的工作會嚴重影響前端開發(fā)的工作效率。


【發(fā)明內(nèi)容】

[0003]基于上述情況，本發(fā)明提出了一種網(wǎng)站前端開發(fā)的方法與系統(tǒng)，以實現(xiàn)自動化前端開發(fā)工作流程，提高網(wǎng)站前端開發(fā)的效率。為此，采用的方案如下。
[0004]一種網(wǎng)站前端開發(fā)的方法，包括以下步驟，且以下步驟的執(zhí)行以node, js的Grunt命令行工具為基礎(chǔ):
[0005]配置項目:建立項目配置文件，該文件中包含網(wǎng)站前端待開發(fā)項目的名稱、描述、分支名、SVN服務(wù)器地址及對應(yīng)的本地開發(fā)服務(wù)器地址；
[0006]初始化項目:利用grunt-shell插件調(diào)用SVN命令,按照所述項目配置文件中指定的分支名稱，新建并檢出開發(fā)和測試分支；
[0007]開發(fā)編碼實現(xiàn):更改hosts文件，將靜態(tài)資源域名映射到本地，解析靜態(tài)資源請求，返回響應(yīng)本地對應(yīng)的文件；利用grunt-contrib-watch插件監(jiān)聽所述項目配置文件的模板分支里面HTML文件的更改,通過grunt-ssh插件將更改的文件通過SSH同步到本地開發(fā)服務(wù)器，使SVN服務(wù)器與本地開發(fā)服務(wù)器無縫同步；
[0008]編譯代碼:通過grunt-closurecompiler 插件，利用 google-closurecompiler 編譯壓縮開發(fā)分支里面的Javascript代碼到對應(yīng)的測試分支；通過grunt-contrib-csslint插件壓縮開發(fā)分支里面的CSS文件到對應(yīng)的測試分支目錄，遍歷CSS文件內(nèi)所有的圖片引用，通過md5獲取對應(yīng)圖片文件的hash值，取8位作為圖片的版本號添加到圖片引用處；通過grunt-contrib-1magemin插件壓縮優(yōu)化開發(fā)分支里面的PNG/JPEG圖片到對應(yīng)的測試分支目錄；
[0009]上傳代碼:通過grunt-shell插件調(diào)用svn commit命令，同時提交開發(fā)和測試分支，在提交之前進行編譯。
[0010]一種網(wǎng)站前端開發(fā)的系統(tǒng)，包括以下單元，且以下單元以node, js的Grunt命令行工具為基礎(chǔ):
[0011]項目配置單元:用于建立項目配置文件，該文件中包含網(wǎng)站前端待開發(fā)項目的名稱、描述、分支名、SVN服務(wù)器地址及對應(yīng)的本地開發(fā)服務(wù)器地址；
[0012]項目初始化單元:用于利用grunt-shell插件調(diào)用SVN命令，按照所述項目配置文件中指定的分支名稱，新建并檢出開發(fā)和測試分支；
[0013]編碼開發(fā)單元:用于更改hosts文件，將靜態(tài)資源域名映射到本地，解析靜態(tài)資源請求，返回響應(yīng)本地對應(yīng)的文件；利用grunt-contrib-watch插件監(jiān)聽所述項目配置文件的模板分支里面HTML文件的更改,通過grunt-ssh插件將更改的文件通過SSH同步到本地開發(fā)服務(wù)器，使SVN服務(wù)器與本地開發(fā)服務(wù)器無縫同步；
[0014]代碼編譯單元:用于通過grunt-closurecompiler插件，利用google-closurecompiler編譯壓縮開發(fā)分支里面的Javascript代碼到對應(yīng)的測試分支；通過grunt-contrib-csslint插件壓縮開發(fā)分支里面的CSS文件到對應(yīng)的測試分支目錄，遍歷CSS文件內(nèi)所有的圖片引用，通過md5獲取對應(yīng)圖片文件的hash值，取8位作為圖片的版本號添加到圖片引用處；通過grunt-contrib-1magemin插件壓縮優(yōu)化開發(fā)分支里面的PNG/JPEG圖片到對應(yīng)的測試分支目錄；
[0015]代碼上傳單元:用于通過grunt-shell插件調(diào)用svn commit命令，同時提交開發(fā)和測試分支，在提交之前進行編譯。
[0016]本發(fā)明網(wǎng)站前端開發(fā)的方法與系統(tǒng)，改進了網(wǎng)站前端靜態(tài)資源的編譯優(yōu)化處理方式，將基于Jekins/Huson服務(wù)器的編譯流程改為本地編譯，極大的提升了編譯效率，并且和SVN整合，從而可以隨時提交，實時編譯。同時添加了針對圖片文件的壓縮處理，引用hash值作為圖片版本號，保證了版本號的準確性和唯一性?？傊景l(fā)明的方法與系統(tǒng)針對網(wǎng)站前端開發(fā)流程中的每個步驟實現(xiàn)一個個自動化的任務(wù)，整個工作流基于node, js的Grunt命令行工具，串聯(lián)了網(wǎng)站前端開發(fā)的整個流程，通過本地配置文件的方式，自動化整個流程，方便了流程在團隊間統(tǒng)一、共享和協(xié)作。

【專利附圖】

【附圖說明】
[0017]圖1為本發(fā)明網(wǎng)站前端開發(fā)的方法的流程示意圖；
[0018]圖2為本發(fā)明網(wǎng)站前端開發(fā)的系統(tǒng)的結(jié)構(gòu)示意圖。

【具體實施方式】
[0019]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點更加清楚明白，以下結(jié)合附圖及實施例，對本發(fā)明進行進一步的詳細說明。應(yīng)當(dāng)理解，此處所描述的【具體實施方式】僅僅用以解釋本發(fā)明，并不限定本發(fā)明的保護范圍。
[0020]一個典型的網(wǎng)站前端開發(fā)工作流程，包含5個方面:
[0021]1、新建一個項目；
[0022]2、開發(fā)編碼實現(xiàn)；
[0023]3、編譯優(yōu)化前端資源；
[0024]4、測試；
[0025]5、發(fā)布。
[0026]新建一個項目需要:
[0027]從central代碼庫新建一個開發(fā)分支；
[0028]從trunk代碼庫新建一個測試分支；
[0029]從SVN檢出開發(fā)和測試分支。
[0030]開發(fā)過程中需要手動和服務(wù)器同步HTML模板代碼修改才能調(diào)試頁面，不同的項目可能還要切換到不同的環(huán)境hosts。
[0031]在測試前需要編譯優(yōu)化前端資源，通過將開發(fā)代碼上傳到一個Jekins/Huson服務(wù)器統(tǒng)一做編譯處理，然后下載解壓編譯后的代碼到測試分支，再將代碼上傳到SVN，然后準備申請測試。
[0032]在測試過程中發(fā)現(xiàn)bug，就要重復(fù)開發(fā)和編譯的流程，直到測試通過，發(fā)布項目。
[0033]發(fā)布之后要更新有更改的圖片版本號，刷新CDN緩存。
[0034]上述工作流程的缺點是:通過Jekins/Huson服務(wù)器編譯靜態(tài)資源非常耗時，但是在開發(fā)測試過程中編譯又會很頻繁，整個編譯流程缺乏對圖片的優(yōu)化壓縮處理。開發(fā)過程中每次修改HTML模板文件都需要手動更新到對應(yīng)的開發(fā)服務(wù)器才能調(diào)試頁面，開發(fā)效率低下。開發(fā)多個項目時，不同項目之間開發(fā)環(huán)境的切換容易混亂。發(fā)布之后圖片版本號要手動刷新，容易遺漏。
[0035]導(dǎo)致上述缺點的原因:因為服務(wù)器資源有限，編譯任務(wù)需要隊列管理，同時只能整包編譯，進一步導(dǎo)致編譯時間增加。服務(wù)器端編譯基于Ant的配置復(fù)雜，缺乏靈活性，沒有配置合適的圖片壓縮工具。各個流程對應(yīng)一個個子任務(wù)都需要人工操作，耗費開發(fā)精力，出錯率高，流程之間沒有一個統(tǒng)一的銜接。
[0036]針對上述傳統(tǒng)技術(shù)的缺點，本發(fā)明提供一種基于Grunt的網(wǎng)站前端開發(fā)的方法，主要目的在于:
[0037]1、基于文件配置項目，讓不同項目之間無縫切換，統(tǒng)一規(guī)范前端開發(fā)環(huán)境，同時方便團隊之間協(xié)同工作。
[0038]2、將靜態(tài)資源編譯過程搬到本地，提升編譯速度，同時提供不同的編譯選項，讓整個編譯過程更具靈活性。
[0039]3、整合圖片優(yōu)化到編譯流程，自動hash圖片文件內(nèi)容作為圖片版本號。
[0040]4、和SVN深度整合，只編譯更改過的文件，進一步提升編譯效率，同時提供實時編譯提交代碼，自動初始化項目分支等等。
[0041]5、實時自動同步本地HTML模板文件更改到服務(wù)器，無縫對接本地和服務(wù)器環(huán)境的開發(fā)流程。
[0042]本發(fā)明網(wǎng)站前端開發(fā)的方法針對網(wǎng)站前端開發(fā)流程中的每個步驟實現(xiàn)一個個自動化的任務(wù)，串聯(lián)成一個完整的自動化工作流。
[0043]整個工作流基于node, js的Grunt命令行工具，使用NPM安裝管理相關(guān)的任務(wù)插件，通過提供一個項目配置文件project, json來指定項目相關(guān)的信息，比如項目名稱，描述，分支名，SVN服務(wù)器地址，對應(yīng)的開發(fā)服務(wù)器等等來初始化一個項目開發(fā)環(huán)境。
[0044]詳細的自動化工作流程如下:
[0045]1.新建/檢出SVN分支
[0046]對應(yīng)到一個自定義的grunt init任務(wù),利用grunt-shell插件調(diào)用SVN命令,按照項目配置文件project, json里面指定的分支名稱，自動新建(svn copy)和檢出(svncheckout)相關(guān)的項目分支。
[0047]2.開發(fā)
[0048]對應(yīng)到一個自定義的grunt vipserver任務(wù),這個任務(wù)將做兩件事情:更改hosts文件，將靜態(tài)資源域名映射到本地(127.0.0.1)，解析靜態(tài)資源請求，返回響應(yīng)本地對應(yīng)的文件；利用grunt-contrib-watch插件監(jiān)聽project, json配置的模板分支里面HTML文件更改，通過grunt-ssh插件自動將更改的文件通過SSH同步到配置的開發(fā)服務(wù)器。從而讓服務(wù)器和本地開發(fā)無縫同步。
[0049]3.編譯代碼
[0050]對應(yīng)到一個自定義的grunt build任務(wù),這個任務(wù)對JavaScript, CSS, Image文件分別做不同的壓縮優(yōu)化處理:
[0051]JavaScript:通過 grunt-closurecompiler 插件，利用 google-closurecompiler編譯壓縮開發(fā)分支里面的Javascript代碼到對應(yīng)的測試分支。
[0052]CSS:通過grunt-contrib-csslint插件壓縮開發(fā)分支里面的CSS文件到對應(yīng)的測試分支目錄。然后遍歷CSS文件內(nèi)所有的圖片引用，通過md5獲取對應(yīng)圖片文件的hash值，取8位作為圖片的版本號添加到圖片引用處。
[0053]Image:通過grunt-contrib-1magemin插件壓縮優(yōu)化開發(fā)分支里面的PNG/JPEG圖片到對應(yīng)的測試分支目錄，其他資源比如GIF，F(xiàn)lash復(fù)制同步。
[0054]這個任務(wù)還接受不同的參數(shù)，按照不同的條件編譯:
[0055]grunt build只編譯更改過的文件
[0056]grunt build:noimage只編譯 CSS 和 JavaScript 文件
[0057]grunt build:changelog -只編譯配置指定的文件
[0058]grunt build:all 編譯所有靜態(tài)資源
[0059]4.上傳代碼
[0060]對應(yīng)到一個自定義的grunt push任務(wù),通過grunt-shell插件調(diào)用svn commit命令同時提交開發(fā)和測試分支，在提交之前會進行編譯，具體的內(nèi)部流程如下:
[0061]調(diào)用svn update分別更新開發(fā)和測試分支
[0062]在開發(fā)分支svn status獲取更改的文件列表
[0063]調(diào)用grunt build開始編譯更改過的文件到測試分支
[0064]調(diào)用svn commit提交開發(fā)和測試分支
[0065]保存提交的文件列表到一個對應(yīng)項目的CHANGELOG文件
[0066]完整的自動化工作流程圖概要請見圖1。
[0067]基于自動化工作流的擴展性，圍繞網(wǎng)站前端的開發(fā)環(huán)境特點，提供了一些額外的主流程之外的輔助工具，比如:
[0068]grunt switch:hosts
[0069]方便不同開發(fā)環(huán)境之間hosts的切換，將所有host文件以.hosts自定義后綴名作為標注，放在一個hosts文件夾統(tǒng)一管理，切換的時候?qū)?yīng)指定的hosts文件內(nèi)容直接寫入系統(tǒng)的host配置文件。
[0070]grunt lint
[0071]利用jshint和csslint分別對JavaScript代碼和CSS代碼做代碼檢查。
[0072]本發(fā)明網(wǎng)站前端開發(fā)的系統(tǒng)，如圖2所示，包括以下單元，每個單元與上述方法的一個步驟相對應(yīng)，且每個單元以node, js的Grunt命令行工具為基礎(chǔ):
[0073]項目配置單元:用于建立項目配置文件，該文件中包含網(wǎng)站前端待開發(fā)項目的名稱、描述、分支名、SVN服務(wù)器地址及對應(yīng)的本地開發(fā)服務(wù)器地址；
[0074]項目初始化單元:用于利用grunt-shell插件調(diào)用SVN命令，按照所述項目配置文件中指定的分支名稱，新建并檢出開發(fā)和測試分支；
[0075]編碼開發(fā)單元:用于更改hosts文件，將靜態(tài)資源域名映射到本地，解析靜態(tài)資源請求，返回響應(yīng)本地對應(yīng)的文件；利用grunt-contrib-watch插件監(jiān)聽所述項目配置文件的模板分支里面HTML文件的更改,通過grunt-ssh插件將更改的文件通過SSH同步到本地開發(fā)服務(wù)器，使SVN服務(wù)器與本地開發(fā)服務(wù)器無縫同步；
[0076]代碼編譯單元:用于通過grunt-closurecompiler插件，利用google-closurecompiler編譯壓縮開發(fā)分支里面的Javascript代碼到對應(yīng)的測試分支；通過grunt-contrib-csslint插件壓縮開發(fā)分支里面的CSS文件到對應(yīng)的測試分支目錄，遍歷CSS文件內(nèi)所有的圖片引用，通過md5獲取對應(yīng)圖片文件的hash值，取8位作為圖片的版本號添加到圖片引用處；通過grunt-contrib-1magemin插件壓縮優(yōu)化開發(fā)分支里面的PNG/JPEG圖片到對應(yīng)的測試分支目錄；
[0077]代碼上傳單元:用于通過grunt-shell插件調(diào)用svn commit命令，同時提交開發(fā)和測試分支，在提交之前進行編譯。
[0078]作為一個優(yōu)選的實施例，所述代碼上傳模塊對開發(fā)和測試分支進行編譯的過程如下:
[0079]調(diào)用svn update分別更新開發(fā)和測試分支；
[0080]在開發(fā)分支svn status獲取更改的文件列表；
[0081]調(diào)用grunt build開始編譯更改過的文件到測試分支；
[0082]調(diào)用svn commit提交開發(fā)和測試分支；
[0083]保存提交的文件列表到一個對應(yīng)項目的CHANGELOG文件。
[0084]作為一個優(yōu)選的實施例，與所述代碼編譯單元對應(yīng)的任務(wù)為grunt build任務(wù)，該任務(wù)接受不同的參數(shù)，按照不同的條件編譯:
[0085]grunt build只編譯更改過的文件；
[0086]grunt build:noimage只編譯 CSS 和 JavaScript 文件；
[0087]grunt build:changelog -只編譯配置指定的文件；
[0088]grunt build:all 編譯所有靜態(tài)資源。
[0089]作為一個優(yōu)選的實施例，本系統(tǒng)還包括host文件編輯模塊:用于將所有host文件以.hosts后綴名作為標注，并放在一個hosts文件夾在進行不同開發(fā)環(huán)境之間hosts切換時，將對應(yīng)指定的hosts文件內(nèi)容寫入系統(tǒng)的host配置文件。
[0090]作為一個優(yōu)選的實施例，本系統(tǒng)還包括代碼檢查模塊:用于利用jshint和csslint分別對JavaScript代碼和CSS代碼做代碼檢查。
[0091]綜上，本發(fā)明的方法與系統(tǒng)改進了網(wǎng)站前端靜態(tài)資源的編譯優(yōu)化處理方式，將基于Jekins/Huson服務(wù)器的編譯流程改為本地編譯，極大的提升了編譯效率，現(xiàn)有的基于服務(wù)器編譯一次耗時>9min/次，而在本地本機編譯可將編譯時間壓縮到<5s/次，并且和SVN整合，從而可以隨時提交，實時編譯。同時添加了針對圖片文件的壓縮處理?，F(xiàn)有技術(shù)依賴在代碼層面寫入版本控制變量，每次上線新版本后，都需要手動更新版本號，并且重新編譯一次所有靜態(tài)資源來寫入版本號到代碼。而現(xiàn)有的基于md5 hash圖片文件的方法，可以自動按照圖片文件是否有改動來更新hash值作為版本號，因為對于相同的文件，hash值是唯一的，所以引用hash值作為版本號保證了版本號的準確性和唯一性。
[0092]本發(fā)明的方法與系統(tǒng)串聯(lián)了網(wǎng)站前端開發(fā)的整個流程，通過本地配置文件的方式，自動化整個流程，方便流程在團隊間統(tǒng)一、共享和協(xié)作。
[0093]本發(fā)明的方法與系統(tǒng)不僅僅是一個靜態(tài)資源文件的編譯優(yōu)化工具，還是一整套前端開發(fā)環(huán)境，比如和SVN的整合(提交即編譯代碼)，服務(wù)器切換，和服務(wù)器代碼同步聯(lián)調(diào)開發(fā)，版本號管理等等。因為基于本地node, js環(huán)境下的Grunt自動化，可以依賴NPM下豐富的插件擴展資源，另外基于本地的node, js提供了一個完整的可編程環(huán)境來針對網(wǎng)站前端開發(fā)流程實現(xiàn)定制的自動化，相比單一的服務(wù)器編譯配置，更加強大和靈活。
[0094]以上所述實施例僅表達了本發(fā)明的幾種實施方式，其描述較為具體和詳細，但并不能因此而理解為對本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對于本領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進，這些都屬于本發(fā)明的保護范圍。因此，本發(fā)明專利的保護范圍應(yīng)以所附權(quán)利要求為準。
【權(quán)利要求】
1.一種網(wǎng)站前端開發(fā)的方法，其特征在于，包括以下步驟，且以下步驟的執(zhí)行以node,js的Grunt命令行工具為基礎(chǔ): 配置項目:建立項目配置文件，該文件中包含網(wǎng)站前端待開發(fā)項目的名稱、描述、分支名、SVN服務(wù)器地址及對應(yīng)的本地開發(fā)服務(wù)器地址； 初始化項目:利用grunt-shell插件調(diào)用SVN命令,按照所述項目配置文件中指定的分支名稱，新建并檢出開發(fā)和測試分支； 開發(fā)編碼實現(xiàn):更改hosts文件，將靜態(tài)資源域名映射到本地，解析靜態(tài)資源請求，返回響應(yīng)本地對應(yīng)的文件；利用grunt-contrib-watch插件監(jiān)聽所述項目配置文件的模板分支里面HTML文件的更改,通過grunt-ssh插件將更改的文件通過SSH同步到本地開發(fā)服務(wù)器，使SVN服務(wù)器與本地開發(fā)服務(wù)器無縫同步； 編譯代碼:通過 grunt-closurecompiler 插件，利用 google-closurecompiler 編譯壓縮開發(fā)分支里面的Javascript代碼到對應(yīng)的測試分支；通過grunt-contrib-csslint插件壓縮開發(fā)分支里面的CSS文件到對應(yīng)的測試分支目錄，遍歷CSS文件內(nèi)所有的圖片引用，通過md5獲取對應(yīng)圖片文件的hash值，取8位作為圖片的版本號添加到圖片引用處；通過grunt-contrib-1magemin插件壓縮優(yōu)化開發(fā)分支里面的PNG/JPEG圖片到對應(yīng)的測試分支目錄; 上傳代碼:通過grunt-shell插件調(diào)用svn commit命令，同時提交開發(fā)和測試分支,在提交之前進行編譯。
2.根據(jù)權(quán)利要求1所述的網(wǎng)站前端開發(fā)的方法，其特征在于，對開發(fā)和測試分支進行編譯的過程如下: 調(diào)用svn update分別更新開發(fā)和測試分支； 在開發(fā)分支svn status獲取更改的文件列表； 調(diào)用grunt build開始編譯更改過的文件到測試分支； 調(diào)用svn commit提交開發(fā)和測試分支； 保存提交的文件列表到一個對應(yīng)項目的CHANGELOG文件。
3.根據(jù)權(quán)利要求1或2所述的網(wǎng)站前端開發(fā)的方法，其特征在于，與編譯代碼的步驟對應(yīng)的任務(wù)為grunt build任務(wù),該任務(wù)接受不同的參數(shù),按照不同的條件編譯: grunt build 只編譯更改過的文件； grunt build:noimage只編譯 CSS 和 JavaScript 文件； grunt build:changelog -只編譯配置指定的文件； grunt build:all 編譯所有靜態(tài)資源。
4.根據(jù)權(quán)利要求1或2所述的網(wǎng)站前端開發(fā)的方法，其特征在于，還包括步驟: 將所有host文件以.hosts后綴名作為標注，并放在一個hosts文件夾在進行不同開發(fā)環(huán)境之間hosts切換時，將對應(yīng)指定的hosts文件內(nèi)容寫入系統(tǒng)的host配置文件。
5.根據(jù)權(quán)利要求1或2所述的網(wǎng)站前端開發(fā)的方法，其特征在于，還包括步驟: 利用jshint和csslint分別對JavaScript代碼和CSS代碼做代碼檢查。
6.一種網(wǎng)站前端開發(fā)的系統(tǒng)，其特征在于，包括以下單元，且以下單元以node, js的Grunt命令行工具為基礎(chǔ): 項目配置單元:用于建立項目配置文件，該文件中包含網(wǎng)站前端待開發(fā)項目的名稱、描述、分支名、SVN服務(wù)器地址及對應(yīng)的本地開發(fā)服務(wù)器地址； 項目初始化單元:用于利用grunt-shell插件調(diào)用SVN命令,按照所述項目配置文件中指定的分支名稱，新建并檢出開發(fā)和測試分支； 編碼開發(fā)單元:用于更改hosts文件，將靜態(tài)資源域名映射到本地，解析靜態(tài)資源請求，返回響應(yīng)本地對應(yīng)的文件；利用grunt-contrib-watch插件監(jiān)聽所述項目配置文件的模板分支里面HTML文件的更改,通過grunt-ssh插件將更改的文件通過SSH同步到本地開發(fā)服務(wù)器，使SVN服務(wù)器與本地開發(fā)服務(wù)器無縫同步； 代碼編譯單元:用于通過grunt-closurecompiler插件，利用google-closurecompiler編譯壓縮開發(fā)分支里面的Javascript代碼到對應(yīng)的測試分支；通過grunt-contrib-csslint插件壓縮開發(fā)分支里面的CSS文件到對應(yīng)的測試分支目錄，遍歷CSS文件內(nèi)所有的圖片引用，通過md5獲取對應(yīng)圖片文件的hash值，取8位作為圖片的版本號添加到圖片引用處；通過grunt-contrib-1magemin插件壓縮優(yōu)化開發(fā)分支里面的PNG/JPEG圖片到對應(yīng)的測試分支目錄； 代碼上傳單元:用于通過grunt-shell插件調(diào)用svn commit命令，同時提交開發(fā)和測試分支，在提交之前進行編譯。
7.根據(jù)權(quán)利要求6所述的網(wǎng)站前端開發(fā)的系統(tǒng)，其特征在于，所述代碼上傳模塊對開發(fā)和測試分支進行編譯的過程如下: 調(diào)用svn update分別更新開發(fā)和測試分支； 在開發(fā)分支svn status獲取更改的文件列表； 調(diào)用grunt build開始編譯更改過的文件到測試分支； 調(diào)用svn commit提交開發(fā)和測試分支； 保存提交的文件列表到一個對應(yīng)項目的CHANGELOG文件。
8.根據(jù)權(quán)利要求6或7所述的網(wǎng)站前端開發(fā)的系統(tǒng)，其特征在于，與所述代碼編譯單元對應(yīng)的任務(wù)為grunt build任務(wù),該任務(wù)接受不同的參數(shù),按照不同的條件編譯: grunt build 只編譯更改過的文件； grunt build:noimage只編譯 CSS 和 JavaScript 文件； grunt build:changelog -只編譯配置指定的文件； grunt build:all 編譯所有靜態(tài)資源。
9.根據(jù)權(quán)利要求6或7所述的網(wǎng)站前端開發(fā)的系統(tǒng)，其特征在于，還包括host文件編輯模塊:用于將所有host文件以.hosts后綴名作為標注，并放在一個hosts文件夾在進行不同開發(fā)環(huán)境之間hosts切換時，將對應(yīng)指定的hosts文件內(nèi)容寫入系統(tǒng)的host配置文件。
10.根據(jù)權(quán)利要求6或7所述的網(wǎng)站前端開發(fā)的系統(tǒng)，其特征在于，還包括代碼檢查模塊:用于利用jshint和csslint分別對JavaScript代碼和CSS代碼做代碼檢查。
【文檔編號】G06F9/44GK104133685SQ201410381901
【公開日】2014年11月5日 申請日期:2014年8月5日 優(yōu)先權(quán)日:2014年8月5日
【發(fā)明者】陳弋, 劉輝 申請人:廣州唯品會網(wǎng)絡(luò)技術(shù)有限公司