This article is for readers ????
Now in the hands of Amoy, Jingdong users billions of dollars, headlines today, grapefruit and other mobile phone app in the United States, have common h5 page, they have fast updating, flexible, easy to share and spread the properties. Here are a few of them h5 example :( hand Amoy , US grapefruit ). These are embedded in the app are hundreds, thousands of h5 page. Behind them develop these frameworks h5 is kind of how it?
Perhaps you also want to develop some h5, or simply react, vue application, do some advertising, and do interactive marketing, publishing to the spread of micro-channel circle of friends, that how quickly build and publish these h5 it?
Perhaps you are working near the front beginners, to build such a multi-page website h5, how kind of architecture is the right way to open it?
Perhaps you want to learn under the ear filled webpack, vue, nodejs, es6, play MERN alternative framework , that article also right for you!
The most important thing is, you sick of mobile terminal adapter, mobile end performance optimization , you want to focus on the functional development, and that this article is for you prepared!
If you had to build from scratch now developing a project to h5 page and publish online, how long?
Tick tick tick! ~
You may need to do the following events ??
- Build server works, divided into many directory structure, the configuration to the database mysql, mongodb, redis;
- Front-end engineering structures, divide the directory structure
- Front-end server division dev, test, prod environment
- Front-end configuration webpack do compile multiple h5 is more than a page, you may have to shift the next webpack multi-page configuration program
- OK, you can begin to develop a, mobile h5 well as adaptation problems, ios have retina screen, android old models to be compatible
- Well developed, to produce a compilation released, the production of static file server release? No, better still CDN upload
- Next to deploy a single instance of easy to hang, do publish or introduce pm2 cluster clusters do cluster release
- The front end are not familiar with linux, it has released most of the day
- Wrong view the log, tossing back and forth most of the day
- Toss for a long time, and finally on the line, a circle of friends can forward ~
Above the toss, how long you several heart of.
Troublesome thing, there is always a corresponding solution, released multipages-generator, it may be helpful for you!
Serving multipages-Generator ! ?
multipages-generator is a similar express-generator, a key to generate a multi-page h5 site architecture template npm modules; he is mainly to mobile terminal h5, or simply vue, react, site architecture template angular application; the architecture template in fact, Taobao is, headlines today, the United States and other developed epitome app grapefruit site architecture. Note that he is an architecture, it is a mobile end solution, not a ready-made website templates that can be deployed.
His main feature is full and fine, round, he needed to develop h5 basically the whole, the fine is developed high-performance web page (future will be better), good phone adapter. With a special venue github view.
H5 produce a screenshot, use multipags-generator developed following h5, I probably estimated at only takes one hour.
Also can use the phone chrome, micro letter, Taobao sweep the experience opened
We can test his next performance, android, ihone 4/5/6/7/8, iphonex, such as compatibility (with the hand Amoy flexible, some are here to support him).
multipages-generator supports the following features:
- Support webpack compiling multi-page, specify the project can be compiled, but also compile all items
- Front-end compiler supports hot update
- Compile pages optimized performance, in line with best practice (not perfect, later adding the entire contents of Taobao Performance Optimization)
- Support development, producton environment distinction
- 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，鼓励下我前进的动力?！