资讯专栏INFORMATION COLUMN

multipages-generator今日发布?!妈妈再也不用担心移动端h5网站搭建了!

doodlewind / 1626人阅读

摘要:本文适合的读者现在在手淘,京东,今日头条,美柚等过亿用户的手机中的,都常见网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个的例子手淘,美柚。

本文适合的读者?‍?‍?‍?

现在在手淘,京东,今日头条,美柚等过亿用户的手机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,鼓励下我前进的动力?!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93806.html

相关文章

  • multipages-generator发布?!妈妈再也不用担心移动h5网站搭建

    摘要:本文适合的读者现在在手淘,京东,今日头条,美柚等过亿用户的手机中的,都常见网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个的例子手淘,美柚。 本文适合的读者?‍?‍?‍? 现在在手淘,京东,今日头条,美柚等过亿用户的手机app中的,都常见h5网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个h5的例子:(手淘,美柚)。这些app中都嵌者数以百计,千计的...

    xavier 评论0 收藏0
  • multipages-generator发布?!妈妈再也不用担心移动h5网站搭建

    摘要:本文适合的读者现在在手淘,京东,今日头条,美柚等过亿用户的手机中的,都常见网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个的例子手淘,美柚。 本文适合的读者?‍?‍?‍? 现在在手淘,京东,今日头条,美柚等过亿用户的手机app中的,都常见h5网页,他们有更新快,灵活,便于分享和传播的特性。这里有他们中的几个h5的例子:(手淘,美柚)。这些app中都嵌者数以百计,千计的...

    Kerr1Gan 评论0 收藏0
  • 实用的IT类网站及工具大集合

    摘要:整理的一些实用的类网站及工具。链接云适配有时候我们做出的网站没有用到响应式布局,也可能我们的网站的像素宽度已经规定成具体的多少像素了。同时提供多个开放,功能实用,非常强大。 整理的一些实用的IT类网站及工具。 1.聚合数据 大家在开发过程中,可能会用到各种各样的数据,想找一些接口来提供一些数据。比如天气预报查询,火车时刻表查询,彩票查询,身份证查询等等。有了这个接口,直接调用即可。各种...

    rollback 评论0 收藏0
  • API

    摘要:是一个极度纯净的上传插件,通过简单调整就可以融入到任何项目,支持多文件上传上传速率动态控制真实进度监控分块生成分块上传校验秒传暂停取消等。 跨域学习笔记 前言: 当一个资源,向与之所在服务器不同的域或端口请求另一个资源时,这个HTTP请求,我们认为是跨域的请求。出于安全考虑,浏览器会限制脚本发起的跨域HTTP请求。 那天后端让我把token放到http请求头字段里,说是为了和RN端统一...

    lsxiao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<