[發明專利]基于nodejs的靜態頁面開發腳手架方法

在審

• 申請號: 201910141218.1
• 申請日: 2019-02-26
• 公開（公告）號: CN110045950A
• 公開（公告）日: 2019-07-23
• 發明（設計）人: 李文東;李濤;檀飛騰
• 申請（專利權）人: 中科遙感（深圳）衛星應用創新研究院有限公司;中科遙感科技集團有限公司;廣東中科遙感技術有限公司
• 主分類號: G06F8/30
• 分類號: G06F8/30
• 代理公司: 天津市尚儀知識產權代理事務所(普通合伙) 12217
• 代理人: 高正方

一種基于nodejs的靜態頁面開發腳手架方法，包括以下步驟：（Ⅰ）開發流程，先安裝nodejs，gulp和express，再用gulp構建任務監控所有靜態資源、js、sass和html的變化，自動進行編譯任務，然后用express作為web服務器啟動web服務，配置前端開發服務器的路由，使用arttemplate模板搭建頁面；（Ⅱ）打包流程，用gulp構建任務完成前端打包。本發明可以把復雜樣式的代碼用sass語法來書寫，并自動編譯成瀏覽器識別的css，對多個css或者js壓縮提高性能，使用模板開發，模塊化管理html文件，添加哈希值用于更新js文件和css文件的版本。

技術領域

本發明涉及頁面開發方法的技術領域，特別涉及基于nodejs的靜態頁面開發腳手架方法。

背景技術

現在前端技術的發展，讓前端開發不僅僅局限于靜態網頁的開發，前端代碼邏輯也日催復雜，不方便管理，要是按照以前的開發，會導致開發工作量大，優化麻煩，發布困難等問題。Nodejs的發布是服務器前端可以引入自動化構建來進行開發，解決開發工作量大，優化麻煩和發布困難的問題。

發明內容

本發明是為了克服現有技術中存在的缺點而提出的，其目的是提供基于nodejs的靜態頁面開發腳手架方法。

本發明的技術方案是：

一種基于nodejs的靜態頁面開發腳手架方法，包括以下步驟：

（Ⅰ）開發流程

先安裝nodejs，gulp和express，再用gulp構建任務監控所有靜態資源、js、sass和html的變化，自動進行編譯任務，然后用express作為web服務器啟動web服務，配置前端開發服務器的路由，使用arttemplate模板搭建頁面；

（Ⅱ）打包流程

用gulp構建任務完成前端打包。

所述步驟（Ⅰ）開發流程中用gulp構建任務監控所有靜態資源、js、css、sass和html變化的具體步驟為：

（ⅰ）監控所有靜態資源，將其自動生成到輸出目錄中；

（ⅱ）監控所有js文件，自動壓縮并生成到輸出目錄中；

（ⅲ）監控所有sass文件，自動壓縮并轉換成瀏覽器識別的css文件并生成到輸出目錄中；

（ⅳ）監控所有html文件，自動生成到輸出目錄中。

所述步驟（Ⅱ）打包流程的具體步驟為：

（ⅰ）清除輸出目錄路徑下的所有文件；

（ⅱ）刪除輸出目錄路徑的httl文件，生成html文件，并進行壓縮處理；

（ⅲ）壓縮css文件，并將壓縮的css文件生成到輸出目錄中；

（ⅳ）壓縮js文件，并將壓縮的js文件生成到輸出目錄中；

（ⅴ）注入項目的配置路徑，包括服務器路徑、資源路徑和模板路徑；

（ⅵ）將輸出目錄中的html文件轉換為httl文件；

（ⅶ）刪除打包過程中產生的js文件與css文件。

本發明的有益效果是：

本發明可以把復雜樣式的代碼用sass語法來書寫，并自動編譯成瀏覽器識別的css，對多個css或者js壓縮提高性能，使用模板開發，模塊化管理html文件，添加哈希值用于更新js文件和css文件的版本。

附圖說明

圖1是本發明的方法流程圖。