如何从0开始搭建一个多页面的H5前端工程

或许你是前端工作不久的初学者，搭建这样的多页h5网站，怎么样的架构才是正确的打开方式呢？

如果让你现在从零开始搭建工程开发一个h5页面并且发布到线上，需要多久？

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

上面折腾一番，要多久你心里也有数了。麻烦的事情，总有对应的解决办法，发布的multipages-generator，或许对你会有所帮助！

上菜multipages-generator！

multipages-generator是一个类似express-generator的，一键生成多页h5网站架构模板的npm模块；他主要是为了移动端h5，或者简单的vue，react，angular应用的网站架构模板；该架构模板其实也是淘宝，今日头条，美柚等公司开发app的网站架构的缩影。注意，他是一个架构，是一种移动端解决方案，不是现成可部署的网站模板。

他主要的特点是全而精，全面，开发h5所需的他基本都全了，精是开发出来的网页高性能（未来会更好），手机适配好。具有的特别请移步github查看。

一个h5出产的截图，利用multipags-generator开发出下面的h5，我大概估算了下只需要1个小时。

大家可以测试下他的性能，android，ihone4/5/6/7/8,iphonex,等的兼容性（用了手淘flexible，他有的这里都支持）。

multipages-generator支持以下特点：

安装

通过NPM全局安装即可使用：

npminstallmultipages-generator-g

创建并运行

步骤一：执行multipages-generate

multipages-generate

步骤二：出现输入项目名提示，并输入您的项目名称

Projectname:<输入项目名>

步骤三：进入目录->install->启动

installdependencies:

%scd%s&&npminstall

runtheapp:

npmrunstart

or:

pm2startprocess.json

运行与开发

启动服务端

上面已经启动了，如果还没执行上面的步骤，执行以下命令

前端热启动项目viewport

打开另一个终端黑窗

npmrunwatch:viewport

注意：

本应用需启动两个服务，一个是服务端node.js（端口默认为4000），一个是前端（browser-sync，默认2000）这里为了让开发时更愉悦，启动了前端服务，具有热更新的性能，每次更新自动编译输出到express工程的对应目录中，项目部署时不需要启动；

新增一个项目

apps目录下已有facemerge，viewport两个项目，新增一个项目xxx，目录结构需参考viewport

├─facemerge

│├─assets

││├─css

││└─imgs

│├─js

│└─views

└─voicemerge

"watch:facemerge":"rimrafpublic&&cross-envENV=devPROJECT_NAME=facemergenode./tools/webpack.watch.js"

启动方式跟上述“开发模式启动项目facemerge”相同

发布

开发好了就发布线上，这里也整理了一套30分钟发布到线上的教程。但是仅限于个人玩一玩，并不能用于生产。但是实际上企业中使用的核心思想也是这套+cI自动化部署；

总结

本文介绍了multipages-generator（简称MG）迅速搭建移动端h5工程，以及迅速发布自己的应用到云服务器上。希望对前端同仁有所帮助，现在MG还在不断的迭代演进中，如果对你有所帮助，希望动动手给我的GitHub打个start，鼓励下我前进的动力！