multipages-generator今日發佈?！媽媽不再用擔憂移動端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: <輸入項目名>

步驟三：進入目錄 -> install -> 啓動

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

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

運行與開發

啓動服務端

上面已經啓動了，若是還沒執行上面的步驟，執行如下命令

npm run start

前端熱啓動項目facemerge

打開另外一個終端黑窗

npm run watch:facemerge

會有頁面打開,沒有的話手動打開http://localhost:2000

注意：

本應用需啓動兩個服務，一個是服務端node.js（端口默認爲4000），一個是前端（browser-sync，默認2000）
這裏爲了讓開發時更愉悅，啓動了前端服務，具備熱更新的性能，每次更新自動編譯輸出到express工程的對應目錄中，項目部署時不須要啓動；

新增一個項目

apps 目錄下已有facemerge，viewport兩個項目，新增一個項目xxx，目錄結構需參考facemerge

├─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，鼓勵下我前進的動力?！