10分钟完成App下载页面编写

差不多前端工作上一段时间完成这样的页面没什么难度。当时项目经理说App发布会在中午2点开始,12点半告诉我要完成这个页面,要求如下:

  • 解决手机端兼容性的问题,尤其是小米浏览器
  • 解决响应式的问题,iphone5上能显示全
  • 在微信中显示提示“在手机浏览器中打开”
  • 图片上传到CDN,区域资源全部打包到一个html中并压缩(最终交付一个html)

看样子要上一个Gulp工程了,于是着急的写了一个gulpfile.js,然后吭哧吭哧了差不多1个多小时完成了页面。页面完成后,觉得这样的需求应该不是突发的,日后App发布时的H5下载页都需要写一份,所以将项目当做种子文件,发布到Github上便于以后应对。

项目地址

点这里,预览最终预览如下:

如何开始

  1. 点击上面的地址下载该项目
  2. 进入目录运行npm install
  3. 执行gulp serve开始编码

Gulp任务

任务名称 任务介绍
serve 开启服务,页面修改能自动刷新
default 清理dist目录,执行build
build 生成最终文件
serve:dist 生成最终文件,并进行预览

以上内容的最新版请查看我的博客,点这里
(完)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,834评论 1 32
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    依依玖玥阅读 8,390评论 7 55
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 5,080评论 0 10
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    小裁缝sun阅读 4,472评论 0 3
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 4,714评论 0 8