前后端版本号关联

主要解决前后端版本自动化关联问题。目前推荐使用 ykit-version-plugin，最新版本为1.1.3，建议使用最新版本。

页面写法

只需要在资源文件名后面加一个@ver，发布之后即可自动匹配到对应的前端资源。

  1. <script src="http://q.qunarzz.com/piao_pmc/prd/scripts/base@ver.js" type="text/javascript"></script>

后端配置

在后端工程的pom.xml里的build—》plugins节点里增加如下配置(如果原来使用了copy-maven-plugin，那么可以去掉了，只用配置下面的plugin即可。)

  1. <plugin>
  2.     <groupId>com.qunar.maven.plugins</groupId>
  3.     <artifactId>ykit-version-plugin</artifactId>
  4.     <version>1.1.2</version>
  5.     <executions>
  6.         <execution>
  7.             <id>fe.piao_tts</id> //这里要修改为自己工程的标示，否则可能导致插件无法正常执行
  8.             <phase>package</phase> //对于java工程，默认设置package，如果是Node或其它工程，要看具体发布之行的mvn指令，比如Node一般就是：initialize
  9.             <goals>
  10.                 <goal>FEVersionGenerator</goal>
  11.             </goals>
  12.             <configuration>
  13.                 <domain>q.qunarzz.com</domain>
  14.                 <verType>VER_FILE</verType>
  15.                 <extension>.vm;.jsp</extension>
  16.                 <project>piao_tts</project>
  17.                 <fetag>${fe.piao_tts.version}</fetag>
  18.                 <mailto>xinju.dan@qunar.com</mailto>
  19.                 <vmPath>${project.basedir}/target/ticket-tts/WEB-INF/template/</vmPath>
  20.             </configuration>
  21.         </execution>
  22.     </executions>
  23. </plugin>

参数说明

问：一个后端可以关联多个前端工程吗？

答：可以，只需要在excutions节点里增加一个excution配置即可。

问：非java工程可以使用吗？

答：可以，只要是通过maven构建的工程都可以使用。非maven构建的工程可以通过命令行调用，考虑到需求极少，有需要单独联系xinju.dan。

问：domain参数是做什么用的？

答：domain用来限定前端资源匹配的范围，不是指定域下的资源不会被替换。有的页面src里domain部分是一个变量，那就需要在这里的domain节点也配置那个变量。

问：verType参数是做什么用的？

答：前端构建生成的版本资源包含两种：Files和Map形式，这里可以去指定按照哪种方式去匹配。

问：extension参数是做什么用的？

答：extension用来限定模版文件扩展名，比如这里设置.vm和.jsp，那么.php的模版文件就不会被替换。

问：project参数怎么设置？

答：project必须为前端工程的名字，和git工程的名字是对应的。

问：fetag参数是做什么用的？

答：插件会根据fetag参数去到maven仓库下载前端资源包，这个地方是和后端job里的qzz_tag_name相关连的，务必填写正确，大多数匹配失败都和这个有关系。如果关联一个前端工程，一般写：

${qzz.version}如果关联多个前端，则需要根据qzz_tag_name里定义的去写。

问：mailto参数是做什么用的？

答：如果发布过程中发现有些页面资源匹配不到版本号，则会发报警邮件，这里是接收人邮件，如果多个用分号隔开。

问：vmPath参数是做什么用的？

答：是后端工程vm存放的目录，如果是java工程，要去工程的target下面去找vm所在的目录路径，大多数的匹配失败都和这个有关系，务必填写正确。

扩展功能

关联报警

有时候，前端导出的资源移除了，而后端没有排查完全，或者是分支发布错等原因都会导致 页面关联不到版本号，一旦到线上，页面就会坏掉。

而用自动化插件，配置下mailto节点，在发布阶段，就可以自动把这种情况报警给指定人员，并在邮件里详细描述关联失败的情况，第一时间就可以知道并解决问题。

预先缓存

如果我们在模版（vm/jsp）页面里指定了：

  1. <!--[precache]-->

那么发布完成之后，插件就会在工程的resource目录里生成cache-list文件，这样前端拿到这个文件可以选择性的去做预先加载。格式如下：

  1. x_precache_callback([
  2. "//q.qunarzz.com/piao_tts/prd/styles/usage/touch/core/style@47045973dd6e2d41c75aea17bbaf8d2d.css",
  3. "//q.qunarzz.com/piao_tts/prd/scripts/cpanel/touch/setting/page@f6ee723939b02c382ba22725b3cd453a.js",
  4. "//q.qunarzz.com/piao_tts/prd/scripts/cpanel/touch/order/consume/page@2e2dd4fc3939ed622aad02e56b7bbd22.js",
  5. "//q.qunarzz.com/piao_tts/prd/styles/usage/touch/page/login/style@1c7164301c45726f7f7cedafaae41b6e.css",
  6. "//q.qunarzz.com/piao_tts/prd/styles/usage/touch/page/list/style@4029ea60c4ab5081deb884aecaa61e32.css",
  7. "//q.qunarzz.com/piao_tts/prd/styles/usage/touch/page/notice/style@c158e2066837e25cc428addf0c00d949.css",
  8. "//q.qunarzz.com/piao_tts/prd/scripts/cpanel/touch/login/page@f7e04d6baba46cced50858f7fafd8818.js",
  9. "//q.qunarzz.com/piao_tts/prd/styles/usage/touch/page/setting/style@71a8fbcdae43dd1c0f74111f88c522ea.css",
  10. "//q.qunarzz.com/piao_base/prd/scripts/release/hybrid@fad1d22cebfdcce55ae669b99a5ad23f.js",
  11. "//q.qunarzz.com/piao_tts/prd/scripts/cpanel/touch/notice/list/page@f26fd1c6ae4e6f997be0bf391d85762c.js",
  12. "//q.qunarzz.com/piao_tts/prd/scripts/cpanel/touch/order/list/page@97ad1e7089b7dbd115fa3b4ae578482c.js"
  13. ]);

前端可以使用jsonp的方式去选择性的预先加载这些文件，或者发挥想象力做一些其他优化。

HTML压缩

前端工程发布后，js、css这些都得到了压缩，对于加载速度流量要求较高的页面，HTML也需要压缩怎么办呢？拿门票首页面来说，启用HTML压缩之前大小是130k+，压缩之后能到80k+，还是比较可观的。

使用ykit-version-plugin可以做到，发布过程中对jsp进行可选择性压缩。

使用方法：

在jsp页面任意位置增加如下标记，当然建议增加在头部。

  1. <!--[minsource on]-->

如果是一个jsp里include多个小jsp，需要在小jsp里也加入此标记。