摘要：本文適合的讀者現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶的手機(jī)中的，都常見(jiàn)網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)的例子手淘，美柚。

現(xiàn)在在手淘，京東，今日頭條，美柚等過(guò)億用戶的手機(jī)app中的，都常見(jiàn)h5網(wǎng)頁(yè)，他們有更新快，靈活，便于分享和傳播的特性。這里有他們中的幾個(gè)h5的例子：（手淘，美柚）。這些app中都嵌者數(shù)以百計(jì)，千計(jì)的h5網(wǎng)頁(yè)。背后他們開(kāi)發(fā)這些h5的框架是怎么樣的呢？

或許你也想開(kāi)發(fā)一些h5，或者簡(jiǎn)單的react，vue應(yīng)用，做些廣告，做些互動(dòng)和營(yíng)銷，發(fā)布到微信朋友圈傳播，那如何快速的搭建和發(fā)布這些h5呢？

或許你是前端工作不久的初學(xué)者，搭建這樣的多頁(yè)h5網(wǎng)站，怎么樣的架構(gòu)才是正確的打開(kāi)方式呢？

或許你想學(xué)習(xí)下充斥耳邊的webpack,vue,nodejs,es6,MERN框架的另類玩法，那這篇文章也適合你！

最重要的是，你煩透了移動(dòng)端適配，移動(dòng)端性能優(yōu)化，你只想專注于功能開(kāi)發(fā)，那這篇文章就是為你而準(zhǔn)備的！

滴答滴答滴答！～
你可能需要做以下這些事件?？

搭建服務(wù)端工程，分好目錄結(jié)構(gòu)，配置要數(shù)據(jù)庫(kù)mysql，mongodb，redis;

搭建前端工程，劃分目錄結(jié)構(gòu)

前端，服務(wù)端劃分dev，test，prod環(huán)境

前端配置webpack做編譯，多個(gè)h5是多頁(yè)面的，可能你還要倒騰下webpack多頁(yè)面的配置方案

好了，可以開(kāi)始開(kāi)發(fā)了，mobile h5還有適配問(wèn)題，ios有retina屏，android老舊機(jī)型要兼容

開(kāi)發(fā)好了，要生產(chǎn)發(fā)布編譯了，生產(chǎn)的靜態(tài)文件放服務(wù)器？不，還是CDN上傳比較好

接下來(lái)要部署了，單個(gè)實(shí)例容易掛，要做cluster集群發(fā)布或者引入pm2做集群發(fā)布

前端不熟悉linux，發(fā)布了大半天

出錯(cuò)了查看日志，來(lái)回折騰了大半天

折騰了好久，終于上線了，可以轉(zhuǎn)發(fā)朋友圈了～

上面折騰一番，要多久你心里也有數(shù)了。
麻煩的事情，總有對(duì)應(yīng)的解決辦法，發(fā)布的multipages-generator，或許對(duì)你會(huì)有所幫助！

multipages-generator 是一個(gè)類似express-generator的，一鍵生成多頁(yè)h5網(wǎng)站架構(gòu)模板的npm模塊；他主要是為了移動(dòng)端h5，或者簡(jiǎn)單的vue，react，angular應(yīng)用的網(wǎng)站架構(gòu)模板；該架構(gòu)模板其實(shí)也是淘寶，今日頭條，美柚等公司開(kāi)發(fā)app的網(wǎng)站架構(gòu)的縮影。注意，他是一個(gè)架構(gòu)，是一種移動(dòng)端解決方案，不是現(xiàn)成可部署的網(wǎng)站模板。

他主要的特點(diǎn)是全而精，全面，開(kāi)發(fā)h5所需的他基本都全了，精是開(kāi)發(fā)出來(lái)的網(wǎng)頁(yè)高性能（未來(lái)會(huì)更好），手機(jī)適配好。具有的特別請(qǐng)移步github查看。

一個(gè)h5出產(chǎn)的截圖，利用multipags-generator開(kāi)發(fā)出下面的h5，我大概估算了下只需要1個(gè)小時(shí)。

也可以用手機(jī)chrome，微信，淘寶的掃一掃打開(kāi)體驗(yàn)下

大家可以測(cè)試下他的性能，android，ihone 4/5/6/7/8, iphonex, 等的兼容性（用了手淘flexible，他有的這里都支持）。

multipages-generator 支持以下特點(diǎn)：

支持webpack編譯多頁(yè)面，可編譯指定項(xiàng)目，也可編譯全部項(xiàng)目

前端編譯支持熱更新

編譯出的網(wǎng)頁(yè)性能經(jīng)過(guò)優(yōu)化，符合最佳實(shí)踐（還不完善，后面加入淘寶性能優(yōu)化的全部?jī)?nèi)容）

支持development,producton環(huán)境區(qū)分

producton環(huán)境可配置生產(chǎn)的css,js,images自動(dòng)編譯后上傳OSS服務(wù)器

webpack編譯后的html模板支持ejs等模板引擎

使用node.js做服務(wù)，nodemon熱更新

支持pm2集群?jiǎn)?dòng)

? (新) 加入手淘flexible布局方案，適配不同尺寸和DPI的屏幕，加入postcss支持

? (新) 支持生產(chǎn)release模式，配置下七牛云CDN，編譯后js，css，圖片等資源文件上傳cdn

通過(guò)NPM全局安裝即可使用：

npm install multipages-generator -g

創(chuàng)建并運(yùn)行?

步驟一：執(zhí)行multipages-generate

multipages-generate

步驟二：出現(xiàn)輸入項(xiàng)目名提示，并輸入您的項(xiàng)目名稱

? Project name: <輸入項(xiàng)目名>

步驟三：進(jìn)入目錄 -> install -> 啟動(dòng)

   install dependencies:
     %s cd %s && npm install

   run the app:
     npm run start
   or:
     pm2 start process.json

上面已經(jīng)啟動(dòng)了，如果還沒(méi)執(zhí)行上面的步驟，執(zhí)行以下命令

    npm run start

打開(kāi)另一個(gè)終端黑窗

    npm run watch:facemerge

會(huì)有頁(yè)面打開(kāi),沒(méi)有的話手動(dòng)打開(kāi)http://localhost:2000

本應(yīng)用需啟動(dòng)兩個(gè)服務(wù)，一個(gè)是服務(wù)端node.js（端口默認(rèn)為4000），一個(gè)是前端（browser-sync，默認(rèn)2000）
這里為了讓開(kāi)發(fā)時(shí)更愉悅，啟動(dòng)了前端服務(wù)，具有熱更新的性能，每次更新自動(dòng)編譯輸出到express工程的對(duì)應(yīng)目錄中，項(xiàng)目部署時(shí)不需要啟動(dòng)；

apps 目錄下已有facemerge，viewport兩個(gè)項(xiàng)目，新增一個(gè)項(xiàng)目xxx，目錄結(jié)構(gòu)需參考facemerge

├─facemerge
│  ├─assets
│  │  ├─css
│  │  └─imgs
│  ├─js
│  └─views
└─voicemerge

    "watch:facemerge": "rimraf public &&cross-env ENV=dev PROJECT_NAME=facemerge node ./tools/webpack.watch.js"

啟動(dòng)方式跟上述 “開(kāi)發(fā)模式啟動(dòng)項(xiàng)目facemerge” 相同

開(kāi)發(fā)好了就發(fā)布線上，這里也整理了一套30分鐘發(fā)布到線上的教程。但是僅限于個(gè)人玩一玩，并不能用于生產(chǎn)。但是實(shí)際上企業(yè)中使用的核心思想也是這套 + cI自動(dòng)化部署；

本文介紹了multipages-generator（簡(jiǎn)稱MG）迅速搭建移動(dòng)端h5工程，以及迅速發(fā)布自己的應(yīng)用到云服務(wù)器上。希望對(duì)前端同仁有所幫助，現(xiàn)在MG還在不斷的迭代演進(jìn)中，如果對(duì)你有所幫助，希望動(dòng)動(dòng)手給我的GitHub打個(gè)start，鼓勵(lì)下我前進(jìn)的動(dòng)力?！