generator-iqiyi-mobile

Scaffold out a front-end web app

Usage no npm install needed!

<script type="module">
  import generatorIqiyiMobile from 'https://cdn.skypack.dev/generator-iqiyi-mobile';
</script>

README

H5开发环境重构--拆分前后端

一、背景介绍


  目前的活动项目，由于前后端资源全在一个工程目录下，随着活动的逐渐增多，项目目录越来越大，导致发布过程越来越慢，但是同时，从资源积累的角度来说，以往的资源我们还是应该保存，而不是简单的下线的删除；从项目工程化开发的角度来说，

前后端分离更加有必要。由于目前我们无法打通跟CDN，即无法直接把前端资源部署到CDN上，必须手动上传，根据目前的活动项目进行拆分，如下：

1. 活动项目的后端继续使用mobact2rd.

2. 活动的前端资源不放在原来项目下，新建一个lib工程，根据项目名称建立目录，保存项目资源。

3. 活动页面的引用都引用lib下的资源，即发布的时候同时发布后端和前端。

二、lib下目录

!QQ截图20141008104114.png!

  根据项目的不同，进行目录的区分

三、前端环境搭建

   npm install -g yo
  • 第二步，安装grunt bower
   npm install -g grunt-cli bower
  • 第三步，搭建一个web应用脚手架
   npm install -g generator-webapp

四、构建webapp

  • 环境创建好后，开始构建我们的webapp
   为你的项目创建一个新的目录，以创建移动MM项目为例， mkdir mobieMM cd mobieMM
  • 运行
   yo webapp
  • 完成后目录应该如下图 !QQ截图20141008104827.png !
  • 修改Grunt.js,
   将.tmp替换为tmp,linux上传不支持文件名以.开头
  • bower.json用来描述前端的依赖库 可以根据文档选择自己项目依赖的库 ，然后运行
   运行 bower install
  • package.json 是node的依赖描述包
   运行 npm install
  • grunt.js是前端集成环境的核心，用来执行一些CSS,JS代码校验、打包的工作，可自定义

四、项目调试

  • 在mobact2rd中,public文件夹下不在新增，只添加活动的后台php文件以及对应的view
  • 开发过程首先依据步骤三完成静态文件的开发，然后做套页面以及后台开发
  • 在webapp中做开发后，可以运行
  grunt server 本地预览
  • 在静态页面完成，在后端yaf框架中套页面时，为了本地测试方便，引用的CSS地址为
   http://localhost:9000/styles/main.css
  • 引用的JS地址为
  http://localhost:9000/scripts/main.js
  • 如果页面中存在本地开发webapp中的其他地址，则在其前面全部添加
   http://localhost:9000

比如在本地调试中，图片地址为

在后端套页面后替换为，即可
  • 这样做的好处是方便的随时进行调试
  • 在手机端进行测试的话需要将webapp上传到测试环境，将webapp更新到lib项目中，上传的时候忽略node_modules文件夹，然后引用view中页面引用地址变更为
   http://partner.vip.qiyi.com/lib/xx项目名/tmp/styles/main.css
   http://partner.vip.qiyi.com/lib/xx项目名/app/script/main.js
  • 以移动MM项目为例，切换地址如下所示 !QQ截图20141010102006.png!

五、项目上线规范

  • 由于活动页面的规则限定比较简单，css js文件都限定为一个引用地址，并且必须为压缩好的CDN地址
  • 图片地址尽量上传到CDN，由于我们没有CDN的权限，无法统一上传，目前也可以直接引用lib下的images文件夹，如果图片不多的话，尽量还是上传到CDN，然后引用图片地址改为CDN地址
  • 在lib中的项目上传之前，先运行
  grunt clean 清除测试产生的临时文件夹
  grunt build 生成最终css js
  然后将dest文件夹下的CSS，JS上传到CDN
  • 最终JS引用地址为上传到CDN后的地址如：
    http://static.qiyi.com/js/common/XX.JS
  • 最终CSS引用地址为上传到CDN后的地址如：
    http://static.qiyi.com/css/common/XX.css

!QQ截图20141008104852.png ! 上传文件时候忽略bower-components npm-modules文件夹