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)过渡阶段其他问题。以及方案的容灾处理