multipages-generator（簡稱MG）是一個為移動端h5量身打造的網站腳手架，用它可以讓你相對的以正確的姿勢、迅速的身手、專注於業務，愉快的進行h5開發，以及有配套的快速釋出流程。
本文適合的讀者????
現在在手淘，京東，今日頭條，美柚等過億使用者的手機app中的，都常見h5網頁，他們有更新快，靈活，便於分享和傳播的特性。這裡有他們中的幾個h5的例子：（手淘，美柚）。這些app中都嵌者數以百計，千計的h5網頁。背後他們開發這些h5的框架是怎麼樣的呢？
如果你也想開發一些h5，或者簡單的react，vue應用，做些廣告，做些互動和營銷，釋出到微信朋友圈傳播，那如何快速的搭建和釋出這些h5呢？
如果你是前端工作不久的初學者，搭建這樣的多頁h5網站，怎麼樣的架構才是正確的開啟方式呢？
如果你想學習下充斥耳邊的webpack,vue,nodejs,es6,MERN框架的另類玩法，那這篇文章也適合你！
最重要的是，如果你煩透了移動端適配，移動端效能優化，你只想專注於功能開發，那這篇文章就是為你而準備的！
如果讓你現在從零開始搭建工程開發一個h5頁面並且釋出到線上，需要多久？
滴答滴答滴答！～ 你可能需要做以下這些事件?？
- 搭建服務端工程，分好目錄結構，配置要資料庫mysql，mongodb，redis;
- 搭建前端工程，劃分目錄結構
- 前端，服務端劃分dev，test，prod環境
- 前端配置webpack做編譯，多個h5是多頁面的，可能你還要倒騰下webpack多頁面的配置方案
- 好了，可以開始開發了，mobile h5還有適配問題，ios有retina屏，android老舊機型要相容
- 開發好了，要生產釋出編譯了，生產的靜態檔案放伺服器？不，還是CDN上傳比較好
- 接下來要部署了，單個例項容易掛，要做cluster叢集釋出或者引入pm2做叢集釋出
- 前端不熟悉linux，釋出了大半天
- 出錯了檢視日誌，來回折騰了大半天
- 折騰了好久，終於上線了，可以轉發朋友圈了～
上面折騰一番，要多久你心裡也有數了。 麻煩的事情，總有對應的解決辦法，釋出的multipages-generator，或許對你會有所幫助！
上菜 multipages-generator！?
multipages-generator 是一個類似express-generator的，一鍵生成多頁h5網站架構模板的npm模組；他主要是為了移動端h5，或者簡單的vue，react，angular應用的網站架構模板；該架構模板其實也是淘寶，今日頭條，美柚等公司開發app的網站架構的縮影。注意，他是一個架構，是一種移動端解決方案，不是現成可部署的網站模板。
他主要的特點是全而精，全面，開發h5所需的他基本都全了，精是開發出來的網頁高效能（未來會更好），手機適配好。具有的特別請移步github檢視。
一個h5出產的截圖，利用multipags-generator開發出下面的h5，我大概估算了下只需要1個小時。
也可以用手機chrome，微信，淘寶的掃一掃開啟體驗下
大家可以測試下他的效能，android，ihone 4/5/6/7/8, iphonex, 等的相容性（用了手淘flexible，他有的這裡都支援）。
multipages-generator 支援以下特點：
- 支援webpack編譯多頁面，可編譯指定專案，也可編譯全部專案
- 前端編譯支援熱更新
- 編譯出的網頁效能經過優化，符合最佳實踐（還不完善，後面加入淘寶效能優化的全部內容）
- 支援development,producton環境區分
- producton環境可配置生產的css,js,images自動編譯後上傳OSS伺服器
- webpack編譯後的html模板支援ejs等模板引擎
- 使用node.js做服務，nodemon熱更新
- 支援pm2叢集啟動
- ? (新) 加入手淘flexible佈局方案，適配不同尺寸和DPI的螢幕，加入postcss支援
- ? (新) 支援生產release模式，配置下七牛雲CDN，編譯後js，css，圖片等資原始檔上傳cdn
安裝
通過NPM全域性安裝即可使用：
npm install multipages-generator -g
建立並執行?
步驟一：執行multipages-generate建立網站
multipages-generate
複製程式碼步驟二：出現輸入專案名提示，並輸入您的專案名稱
? Project name: <輸入專案名>
複製程式碼步驟三：進入工程名，並下載依賴包
cd {你的工程名}
npm run install
複製程式碼步驟四: 啟動前端和服務端環境
// 執行前端開發環境 以viewport為例子
npm run watch:viewport
// 啟動服務端 （新手注意，新開一個doc視窗，進入你的建立的工程名）
npm run start
複製程式碼四步驟之後，你預設的瀏覽器自動開啟此頁面（如果沒有，手動訪問localhost:2000） ==注意，目前發現viewport例子的素材圖片（在/apps/viewport/assets/imgs 目錄下）經過全域性安裝會編碼出問題。不影響執行，但是如果想看到上面的demo頁面請從我的網盤 下載素材圖片，解壓放到/apps/viewport/assets/imgs 目錄下全部替換那些出問題的圖片==
將來會選用更加適當的demo做演示
執行與開發
啟動服務端
上面已經啟動了，如果還沒執行上面的步驟，執行以下命令
npm run start
複製程式碼前端熱啟動專案viewport
開啟另一個終端黑窗
npm run watch:viewport
複製程式碼會有頁面開啟,沒有的話手動開啟http://localhost:2000
注意：
本應用需啟動兩個服務，一個是服務端node.js（埠預設為4000），一個是前端（browser-sync，預設2000） 這裡為了讓開發時更愉悅，啟動了前端服務，具有熱更新的效能，每次更新自動編譯輸出到express工程的對應目錄中，專案部署時不需要啟動；
新增一個專案
apps 目錄下已有facemerge，viewport兩個專案，新增一個專案xxx，目錄結構需參考viewport
├─facemerge
│ ├─assets
│ │ ├─css
│ │ └─imgs
│ ├─js
│ └─views
└─voicemerge
複製程式碼 "watch:facemerge": "rimraf public &&cross-env ENV=dev PROJECT_NAME=facemerge node ./tools/webpack.watch.js"
複製程式碼啟動方式跟上述 “開發模式啟動專案facemerge” 相同
釋出
開發好了就釋出線上，這裡也整理了一套30分鐘釋出到線上的教程。但是僅限於個人玩一玩，並不能用於生產。但是實際上企業中使用的核心思想也是這套 + cI自動化部署；
總結
本文介紹了multipages-generator（簡稱MG）迅速搭建移動端h5工程，以及迅速釋出自己的應用到雲伺服器上。希望對前端同仁有所幫助，現在MG還在不斷的迭代演進中，如果對你有所幫助，希望動動手給我的GitHub打個start，鼓勵下我前進的動力?！