摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。
本文适合的读者????
现在在手淘，京东，今日头条，美柚等过亿用户的手机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 是一个类似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，鼓励下我前进的动力?！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/52101.html
摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。 本文适合的读者???? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...
摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。 本文适合的读者???? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...
摘要：本文适合的读者现在在手淘，京东，今日头条，美柚等过亿用户的手机中的，都常见网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个的例子手淘，美柚。 本文适合的读者???? 现在在手淘，京东，今日头条，美柚等过亿用户的手机app中的，都常见h5网页，他们有更新快，灵活，便于分享和传播的特性。这里有他们中的几个h5的例子：（手淘，美柚）。这些app中都嵌者数以百计，千计的...
摘要：整理的一些实用的类网站及工具。链接云适配有时候我们做出的网站没有用到响应式布局，也可能我们的网站的像素宽度已经规定成具体的多少像素了。同时提供多个开放，功能实用，非常强大。 整理的一些实用的IT类网站及工具。 1.聚合数据 大家在开发过程中，可能会用到各种各样的数据，想找一些接口来提供一些数据。比如天气预报查询，火车时刻表查询，彩票查询，身份证查询等等。有了这个接口，直接调用即可。各种...
阅读 1028·2021-11-18 10:02
阅读 1788·2021-11-11 16:54
阅读 897·2021-10-12 10:12
阅读 275·2019-08-30 15:43
阅读 516·2019-08-29 13:15
阅读 944·2019-08-29 13:12
阅读 1378·2019-08-26 12:09
阅读 1546·2019-08-26 10:24
