一種網(wǎng)頁(yè)前端開(kāi)發(fā)方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001] 本發(fā)明實(shí)施例設(shè)及互聯(lián)網(wǎng)技術(shù)領(lǐng)域，尤其設(shè)及一種網(wǎng)頁(yè)前端開(kāi)發(fā)方法及裝置。
【背景技術(shù)】
[0002] 隨著前端技術(shù)在網(wǎng)頁(yè)web開(kāi)發(fā)中日益重要，前端開(kāi)發(fā)人員在項(xiàng)目中占比越來(lái)越 大，開(kāi)發(fā)人員之間的代碼共享和溝通也越來(lái)越重要。然而，web前端開(kāi)發(fā)的內(nèi)容繁多，用于 開(kāi)發(fā)的工具功能單一且質(zhì)量參差不齊。為了滿(mǎn)足整個(gè)開(kāi)發(fā)流程中各個(gè)步驟的不同需求，需 要使用多種開(kāi)發(fā)工具，例如，在對(duì)靜態(tài)文件進(jìn)行壓縮合并時(shí)，需要使用不同的文件傳輸協(xié)議 (FileTransferProtocol,FT巧軟件上傳項(xiàng)目中的靜態(tài)文件至測(cè)試服務(wù)器等等。不同工 具之間的配合能力往往較差，所W會(huì)嚴(yán)重影響前端開(kāi)發(fā)人員的工作效率。

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

[0003] 本發(fā)明實(shí)施例的目的是提出一種網(wǎng)頁(yè)前端開(kāi)發(fā)方法及裝置，W解決網(wǎng)頁(yè)前端開(kāi)發(fā) 效率較低的問(wèn)題。
[0004] 一方面，本發(fā)明實(shí)施例提供了一種網(wǎng)頁(yè)前端開(kāi)發(fā)方法，包括：
[0005] 建立項(xiàng)目開(kāi)發(fā)目錄；
[0006] 對(duì)所述項(xiàng)目開(kāi)發(fā)目錄中的靜態(tài)資源進(jìn)行實(shí)時(shí)編譯；
[0007] 對(duì)編譯結(jié)果進(jìn)行優(yōu)化處理并輸出至開(kāi)發(fā)頁(yè)面；
[000引將優(yōu)化結(jié)果上傳至測(cè)試服務(wù)器；
[0009] 將通過(guò)測(cè)試的優(yōu)化結(jié)果發(fā)布至內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)器；
[0010] 其中，所述靜態(tài)資源包括模塊文件，所述模塊文件中包括模板文件、 JavaScript(J巧文件和層疊樣式表（CascadingSt}deSheets,CS巧文件。
[0011] 另一方面，本發(fā)明實(shí)施例提供了一種網(wǎng)頁(yè)前端開(kāi)發(fā)裝置，包括：
[0012] 目錄建立模塊，用于建立項(xiàng)目開(kāi)發(fā)目錄；
[0013] 靜態(tài)資源編譯模塊，用于對(duì)所述項(xiàng)目開(kāi)發(fā)目錄中的靜態(tài)資源進(jìn)行實(shí)時(shí)編譯；
[0014] 優(yōu)化處理模塊，用于對(duì)編譯結(jié)果進(jìn)行優(yōu)化處理并輸出至開(kāi)發(fā)頁(yè)面；
[0015] 上傳模塊，用于將優(yōu)化結(jié)果上傳至測(cè)試服務(wù)器；
[0016] 發(fā)布模塊，用于將通過(guò)測(cè)試的優(yōu)化結(jié)果發(fā)布至內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)器；
[0017] 其中，所述靜態(tài)資源包括模塊文件，所述模塊文件中包括模板文件、JavaScript文 件和層疊樣式表文件。
[001引本發(fā)明實(shí)施例中提供的網(wǎng)頁(yè)前端開(kāi)發(fā)方案，在建立項(xiàng)目開(kāi)發(fā)目錄后，對(duì)項(xiàng)目開(kāi)發(fā) 目錄中的靜態(tài)資源進(jìn)行實(shí)時(shí)編譯，其中，靜態(tài)資源包括包含了模板文件、JS文件和CSS文件 的模塊文件，實(shí)現(xiàn)了對(duì)靜態(tài)資源的模塊化編譯。隨后，對(duì)編譯結(jié)果進(jìn)行優(yōu)化處理并輸出至開(kāi) 發(fā)頁(yè)面，并上傳至測(cè)試服務(wù)器，最后將通過(guò)測(cè)試的優(yōu)化結(jié)果發(fā)布至內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)器。通 過(guò)采用上述技術(shù)方案，可在本地使用同一個(gè)開(kāi)發(fā)工具貫穿完整的web前端開(kāi)發(fā)流程，可用 該工具中的命令將每個(gè)流程步驟單獨(dú)處理，且達(dá)到了將原本相互分離的各開(kāi)發(fā)過(guò)程整合到 一起的目的，省去開(kāi)發(fā)過(guò)程中在不同工具之間進(jìn)行切換的繁瑣步驟，簡(jiǎn)單便捷，方便開(kāi)發(fā)人 員之間的代碼共享和溝通，從而提高開(kāi)發(fā)效率。
【附圖說(shuō)明】
[0019] 圖1為本發(fā)明實(shí)施例一提供的一種網(wǎng)頁(yè)前端開(kāi)發(fā)方法的流程示意圖；
[0020] 圖2為本發(fā)明實(shí)施例一提供的一種優(yōu)選的基于JDF的web前端開(kāi)發(fā)流程示意圖；
[0021] 圖3為本發(fā)明實(shí)施例二提供的一種網(wǎng)頁(yè)前端開(kāi)發(fā)裝置的結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0022] 下面結(jié)合附圖并通過(guò)【具體實(shí)施方式】來(lái)進(jìn)一步說(shuō)明本發(fā)明的技術(shù)方案。可W理解的 是，此處所描述的具體實(shí)施例僅僅用于解釋本發(fā)明，而非對(duì)本發(fā)明的限定。另外還需要說(shuō)明 的是，為了便于描述，附圖中僅示出了與本發(fā)明相關(guān)的部分而非全部結(jié)構(gòu)。
[0023] 實(shí)施例一
[0024] 圖1為本發(fā)明實(shí)施例一提供的一種網(wǎng)頁(yè)前端開(kāi)發(fā)方法的流程示意圖，該方法可W 由網(wǎng)頁(yè)前端開(kāi)發(fā)裝置執(zhí)行，其中該裝置可由軟件和/或硬件實(shí)現(xiàn)。如圖1所示，該方法包 括：
[0025] 步驟101、建立項(xiàng)目開(kāi)發(fā)目錄。
[0026] 示例性的，用于執(zhí)行本實(shí)施例方法的裝置可視為一種前端開(kāi)發(fā)工具，可命名為京 東前端開(kāi)發(fā)工具（Jin曲ong化ont化dTools,JD巧。開(kāi)始開(kāi)發(fā)項(xiàng)目時(shí)，可使用j壯install init命令生成標(biāo)準(zhǔn)化、符合規(guī)范的項(xiàng)目開(kāi)發(fā)目錄，開(kāi)始項(xiàng)目開(kāi)發(fā)。
[0027] 步驟102、對(duì)項(xiàng)目開(kāi)發(fā)目錄中的靜態(tài)資源進(jìn)行實(shí)時(shí)編譯。
[002引其中，靜態(tài)資源包括模塊文件，模塊文件中包括模板文件、JS文件和CSS文件。模 板文件具體可為velocity模板文件。
[0029] 示例性的，可在當(dāng)前項(xiàng)目開(kāi)發(fā)目錄下使用j壯build命令，啟動(dòng)本地服務(wù)器，然后 利用靜態(tài)文件編譯引擎對(duì)項(xiàng)目開(kāi)發(fā)目錄中的靜態(tài)資源進(jìn)行實(shí)時(shí)編譯。
[0030] W下給出一個(gè)對(duì)模塊文件進(jìn)行編譯的實(shí)例：
[0031] 比如ui-product-list為一個(gè)模塊文件，其中包含了velocity模板文件、JS文件 和CSS文件。在開(kāi)發(fā)頁(yè)面應(yīng)用本實(shí)施例的方法時(shí)，可在開(kāi)發(fā)頁(yè)面輸入{%widgetname= "ui-product-list" % }
[0032] 進(jìn)行編譯后如下：
[0033]
[0034]
[0035] 示例性的，靜態(tài)資源還可包括SCSS(sassyCS巧文件，可采用SCSS引擎（sass官 方提供的node-sass模塊）將SCSS文件編譯成CSS文件。
[0036] 優(yōu)選的，在對(duì)項(xiàng)目中的靜態(tài)資源進(jìn)行實(shí)時(shí)編譯時(shí)，還可包括；當(dāng)檢測(cè)到代碼錯(cuò)誤 時(shí)，輸出出錯(cuò)提示信息至所述開(kāi)發(fā)頁(yè)面。例如，如果檢測(cè)到JS文件或CSS文件存在語(yǔ)法錯(cuò)誤 時(shí)，JDF可在開(kāi)發(fā)頁(yè)面打印出錯(cuò)誤信息W及錯(cuò)誤所在行數(shù)，及時(shí)對(duì)開(kāi)發(fā)人員進(jìn)行錯(cuò)誤提示。
[0037] 優(yōu)選的，當(dāng)項(xiàng)目開(kāi)發(fā)目錄中的靜態(tài)資源發(fā)生變化時(shí)，可自動(dòng)編譯變化后的靜態(tài)資 源并同步至用于存儲(chǔ)優(yōu)化結(jié)果的與項(xiàng)目開(kāi)發(fā)目錄對(duì)應(yīng)的緩存目錄，同時(shí)自動(dòng)刷新瀏覽器 頁(yè)面。即支持本地文件變動(dòng)時(shí)瀏覽器自動(dòng)刷新。具體的，可利用Node,js起一個(gè)serve進(jìn)程， 監(jiān)聽(tīng)項(xiàng)目開(kāi)發(fā)目錄的變化，將變化同步至后臺(tái)的緩存目錄，且在預(yù)覽時(shí)自動(dòng)刷新瀏覽器。其 中，Node,js是一個(gè)基于化rome化vaScript運(yùn)行時(shí)建立的平臺(tái)，用于方便地搭建響應(yīng)速度 快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。
[003引步驟103、對(duì)編譯結(jié)果進(jìn)行優(yōu)化處理并輸出至開(kāi)發(fā)頁(yè)面。
[0039] 示例性的，優(yōu)化處理可包括為編譯結(jié)果中的靜態(tài)資源添加統(tǒng)一的內(nèi)容分發(fā)網(wǎng)絡(luò) (ContentDeliveryNetwork,CDN)前綴，并采用版本號(hào)非覆蓋遞增方式進(jìn)行命名；分別對(duì) 上述靜態(tài)資源中的多個(gè)JS文件和多個(gè)CSS文件進(jìn)行合并和壓縮。在輸出至開(kāi)發(fā)頁(yè)面時(shí)，具 體可包括：將優(yōu)化結(jié)果中的數(shù)據(jù)信息輸出至開(kāi)發(fā)頁(yè)面；將模塊文件依賴(lài)的JS文件路徑信息 及CSS文件路徑信息輸出至開(kāi)發(fā)頁(yè)面。
[0040] 具體的，可使用j壯OU化ut命令對(duì)編譯結(jié)果進(jìn)行優(yōu)化處理并輸出至開(kāi)發(fā)頁(yè)面。為 靜態(tài)資源添加統(tǒng)一的CDN前綴，并采用版本號(hào)非覆蓋遞增方式進(jìn)行命名。例如：在為JS文件 進(jìn)行命名時(shí)，可分別命名為1.0.Oa.js，1.0.la.js，2. 0.0a.js等等。其中，a為統(tǒng)一的CDN 前綴，初始版本為1. 0. 0,下次更新版本為1. 0. 1，若有較大改動(dòng)時(shí)會(huì)變更為2. 0. 0。
[0041] 進(jìn)一步的，還可對(duì)字符編碼進(jìn)行統(tǒng)一。例如，無(wú)論當(dāng)前文件格式是gbk、gb2312、 utf8、還是utf8-bom，統(tǒng)一輸出utf8。
[0042] 進(jìn)一步的，考慮頁(yè)面性能，可對(duì)頁(yè)面中的多個(gè)JS文件、CSS文件進(jìn)行合并，成為一 個(gè)文件，或者將JS、CSS輸出成combo的格式（比如？a.js,b.js)，兩者都為了減少瀏覽器 請(qǐng)求數(shù)。JS文件可采用uglify-js進(jìn)行壓縮，CSS文件可采用clean-css進(jìn)行壓縮。在優(yōu) 化處理中，還可對(duì)png圖片等其他文件進(jìn)行壓縮。
[0043] 步驟104、將優(yōu)化結(jié)果上傳至測(cè)試服務(wù)器。
[0044] 示例性的，可使用j壯upload命令利用f化上傳模塊一次性將本地處理完的優(yōu)化 結(jié)