本文也可以在掘金，我的私人博客閱讀
本文適合的讀者???????????
現(xiàn)在在手淘踏拜，京東碎赢，今日頭條，美柚等過億用戶的手機app中的速梗，都常見h5網(wǎng)頁肮塞，他們有更新快，靈活姻锁，便于分享和傳播的特性枕赵。這里有他們中的幾個h5的例子：（[手淘](https://pages.tmall.com/wow/import/17151/tmallglobal?locate=icon-3&spm=a215s.7406091.icons.3&scm=2027.4.1.16)，[美柚](https://uedkit.meiyou.com/annualmeeting/game/)）位隶。這些app中都嵌者數(shù)以百計拷窜，千計的h5網(wǎng)頁。背后他們開發(fā)這些h5的框架是怎么樣的呢涧黄？
或許你也想開發(fā)一些h5篮昧，或者簡單的react，vue應用笋妥，做些廣告懊昨，做些互動和營銷，發(fā)布到微信朋友圈傳播春宣，那如何快速的搭建和發(fā)布這些h5呢酵颁？
或許你是前端工作不久的初學者狈孔，搭建這樣的多頁h5網(wǎng)站，怎么樣的架構才是正確的打開方式呢材义？
或許你想學習下充斥耳邊的webpack,vue,nodejs,es6,MERN框架的另類玩法均抽，那這篇文章也適合你！
最重要的是其掂，你煩透了移動端適配油挥，移動端性能優(yōu)化，你只想專注于功能開發(fā)款熬，那這篇文章就是為你而準備的深寥！
如果讓你現(xiàn)在從零開始搭建工程開發(fā)一個h5頁面并且發(fā)布到線上，需要多久贤牛？
滴答滴答滴答惋鹅！～
你可能需要做以下這些事件??？
* 搭建服務端工程殉簸，分好目錄結構闰集，配置要數(shù)據(jù)庫mysql，mongodb般卑，redis;
* 搭建前端工程武鲁，劃分目錄結構
* 前端，服務端劃分dev蝠检，test沐鼠，prod環(huán)境
* 前端配置webpack做編譯，多個h5是多頁面的叹谁，可能你還要倒騰下webpack多頁面的配置方案
* 好了饲梭，可以開始開發(fā)了，mobile h5還有適配問題焰檩，ios有retina屏憔涉，android老舊機型要兼容
* 開發(fā)好了，要生產發(fā)布編譯了锅尘，生產的靜態(tài)文件放服務器监氢？不，還是CDN上傳比較好
* 接下來要部署了藤违，單個實例容易掛浪腐，要做cluster集群發(fā)布或者引入pm2做集群發(fā)布
* 前端不熟悉linux，發(fā)布了大半天
* 出錯了查看日志顿乒，來回折騰了大半天
* 折騰了好久议街，終于上線了，可以轉發(fā)朋友圈了～
上面折騰一番璧榄，要多久你心里也有數(shù)了特漩。
麻煩的事情吧雹，總有對應的解決辦法，發(fā)布的multipages-generator涂身，或許對你會有所幫助雄卷！
上菜multipages-generator！???
multipages-generator 是一個類似express-generator的蛤售，一鍵生成多頁h5網(wǎng)站架構模板的npm模塊丁鹉；他主要是為了移動端h5，或者簡單的vue悴能，react揣钦，angular應用的網(wǎng)站架構模板；該架構模板其實也是淘寶漠酿，今日頭條冯凹，美柚等公司開發(fā)app的網(wǎng)站架構的縮影。注意炒嘲，他是一個架構宇姚，是一種移動端解決方案，不是現(xiàn)成可部署的網(wǎng)站模板摸吠。
他主要的特點是全而精空凸，全面，開發(fā)h5所需的他基本都全了寸痢，精是開發(fā)出來的網(wǎng)頁高性能（未來會更好），手機適配好紊选。具有的特別請移步github查看啼止。
一個h5出產的截圖，利用multipags-generator開發(fā)出下面的h5兵罢，我大概估算了下只需要1個小時献烦。
也可以用手機chrome，微信卖词，淘寶的掃一掃打開體驗下
大家可以測試下他的性能巩那，android，ihone 4/5/6/7/8, iphonex, 等的兼容性（用了手淘flexible此蜈，他有的這里都支持）即横。
multipages-generator 支持以下特點：
* 支持webpack編譯多頁面，可編譯指定項目裆赵，也可編譯全部項目
* 前端編譯支持熱更新
* 編譯出的網(wǎng)頁性能經(jīng)過優(yōu)化东囚，符合最佳實踐（還不完善，后面加入淘寶性能優(yōu)化的全部內容）
* 支持development,producton環(huán)境區(qū)分
* producton環(huán)境可配置生產的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
創(chuàng)建并運行??
步驟一：執(zhí)行multipages-generate
multipages-generate
步驟二：出現(xiàn)輸入項目名提示废境，并輸入您的項目名稱
? Project name: <輸入項目名>
步驟三：進入目錄 -> install -> 啟動
install dependencies:
%s cd %s && npm install
run the app:
npm run start
or:
pm2 start process.json
運行與開發(fā)
啟動服務端
上面已經(jīng)啟動了肚逸，如果還沒執(zhí)行上面的步驟，執(zhí)行以下命令
npm run start
前端熱啟動項目facemerge
打開另一個終端黑窗
npm run watch:facemerge
會有頁面打開,沒有的話手動打開http://localhost:2000
注意：
本應用需啟動兩個服務彬坏，一個是服務端node.js（端口默認為4000）朦促，一個是前端（browser-sync，默認2000）
這里為了讓開發(fā)時更愉悅栓始，啟動了前端服務务冕，具有熱更新的性能，每次更新自動編譯輸出到express工程的對應目錄中幻赚，項目部署時不需要啟動禀忆；
新增一個項目
apps 目錄下已有facemerge，viewport兩個項目落恼，新增一個項目xxx箩退，目錄結構需參考facemerge
```bash
├─facemerge
│ ├─assets
│ │ ├─css
│ │ └─imgs
│ ├─js
│ └─views
└─voicemerge
```
"watch:facemerge": "rimraf public &&cross-env ENV=dev PROJECT_NAME=facemerge node ./tools/webpack.watch.js"
啟動方式跟上述 “開發(fā)模式啟動項目facemerge” 相同
發(fā)布
開發(fā)好了就發(fā)布線上，這里也整理了一套30分鐘發(fā)布到線上的教程佳谦。但是僅限于個人玩一玩戴涝，并不能用于生產。但是實際上企業(yè)中使用的核心思想也是這套 + cI自動化部署钻蔑；
總結
本文介紹了multipages-generator（簡稱MG）迅速搭建移動端h5工程啥刻，以及迅速發(fā)布自己的應用到云服務器上。希望對前端同仁有所幫助咪笑，現(xiàn)在MG還在不斷的迭代演進中可帽，如果對你有所幫助，希望動動手給我的GitHub打個start窗怒，鼓勵下我前進的動力??映跟！
