node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

gulp-youkuvip

gulp-youkuvip

前端工作流,为前端开发联调加速。

前端工作流 功能说明

  1. 提供易于开发、调试的开发联调环境,支持预编译语言(jade,handerbar,sass,stylus,coffee,es6)
  2. 提供基于requirejs的实时打包服务。
  3. 提供http server, 支持mock接口数据功能。
  4. 提供json文件自动校验
  5. 提供80端口代理、转发功能(可用于多项目联调)
  6. 提供透明代理(即:线下不存在的资源,直接抓取线上,域名在Vhost属性中设置)
  7. 对文件加入md5指纹,实现增量更新缓存。

安装(依赖node.js,npm)

  #全局gulp包 
  npm i gulp -g
 
  #本地gulp包 
  npm i gulp --save
 
  #安装gulp-youkuvip 
  npm i gulp-youkuvip --save
 

4.运行

注意: ####1.请自行安装好node.js环境,本工具依赖node.请将自己的host 配置为: 127.0.0.1 static.youku.com js.youku.com mock.static.youku.com,这里推荐工具一个方便的host切换工具

请进入如下图的项目工程目录,npm i 安装依赖吧。考虑到npm 不稳定可以选择切换其他源,参考https://segmentfault.com/a/1190000000473869?utm_source=tuicool

3.安装完毕后后再命令行进入对应目录 直接 输入gulp 回车,执行默认命令。启动默认的服,浏览器会自动打开该目录下的资源,可以直接打开。

4点击需要调试的页面,页面采用了自动刷新功能(适合双显示器作业),当改动了静态资源后,页面会自动刷新,当改动sass,文件后会自动编译工作目录下sass文件,故第一次的编译会较慢,后续文件已载入缓存,且为改动谁编译谁,编译速度由之前3S以上到ms级,节省开发时间。同时在编译过程中采用了poss css功能,自动加入了前缀,,避免手工去编写。后续CSS地址将为自动生成了绝对地址(写CSS的时候只需要写入文件名字就OK),同时生成的CSS采用行内map,不在生成单独的map 文件(行内map将会在打包阶段去掉)

#### 5.如需mock数据,请mockdata目录加入想要的数据结构。

请将你的mock的url设置为mock.static.youku.com:8000+你的数据路径

具体参考:https://github.com/sanyueyu/gulp-mock-server

6.为保证require正常打包压缩合并正常,请假gulpfile文件修改为符合json格式,同时在打包过程中出现报错,留心看报错信息,一般情况下,是因为加载的文件没有。请补全你使用的文件。确实文件肯定打包不成,因为相互依赖。

7,gulp build 打包文件安排上线。生产的上线文件夹为build,目录结构与dev,为一致

此项过程时间较长,请耐心等待(由于目前本没有把住入口文件和模块文件分开在不同目录),造成重复打包,后续会分开为不同的目录,同时自动完成,完成了图片的压缩。同时完成了静态资源的版本控制。

Css,html,以及引入资源的html也自动将引入的资源地址修改,压缩完毕的CSS也对img资源地址自动修改,如要校验压缩打包的正确性,只需要打开,build目前下的对应html,符合一致性,完备性。

8,当实施前端静态资源版本化后提供一个json文件,给后台替换,实施静态资源版本化的目的是解决目前内嵌H5,出现不能识别时间戳造成上线后不生效,可实现CDN增量更新,解决静态资源和后台上线的先后顺序。(目前百度,微博已实施该静态资源策略),具体参考

http://my.oschina.net/jathon/blog/404968

9,当静态资源上线或送测后,由于现实静态资源已压缩合并混淆,并加入md5版本号,这给调试bug带来麻烦,因而采用启服务,配置host的方式,让线上线下文件有一个映射。能快速发现问题,合理利用线上接口。给debug极大方便。

10,目前存在的问题和后续想改进的功能 a)目前后端需提供对应静态资源打包策略 b)后续版本控制会迁移到git上,严格保障线上线下代码一致,严禁代码不入库,以保障调试阶段线上下代码能正确映射 c)后续会加入api check 功能,严格保障接口的文档化 d)目前并未加入handerbar模板编译,后期考虑过度为jade e)打包速度优化调整(主要是要把主入口文件和模块文件拆开) f)目前前端工作目录过深,可能后续会选择调整 g)过渡阶段其他问题。以及方案的容灾处理