项目背景：
因为业务发展的需要，接手了一个jquery + require.js + bootstrap前后端不分离的的老项目的改造，本次改造的起因是业务请了第三方公司帮忙做SEO引流，而现有的代码是不符合seo规范的，因为requireJs模块化加载导致页面一开始加载的时候DOM节点基本寥寥无几，不利于搜索引擎的抓取。
项目痛点分析：
- 项目前后端没有分离，前端本地开发需要同时启动Java的代码，而且经常因为Java同事代码没上传完整导致项目跑不起来；
- 前后端不分离，前端极少的改动，发版都需要带上Java的代码一起发，对于to-c的项目极不友好；
- jquery项目没有另外打包，对于es6语法，存在在浏览器兼容问题；
- require.js的项目，页面内容基本都是通过js加载进来的，不方便浏览器seo引流；
- 项目老旧，经历了多年人员流动，代码冗余多，首屏加载速度慢；
- 项目公共部分没有抽离，导致重复代码多，页面结构也不清晰。
技术选型：
考虑到现在流行的框架react、vue等SSR服务端渲染需要更多的服务器端负载，再加上jquery的项目再转单页面框架，时间代价比较大，因此放弃了react、vue重构的想法，还是保留了jquery，极好的代码复用，该项目在开发提效方面效果显著。
前后端分离，方便开发，首先想到了nodeJs，于是乎基本架子就出来了:
graph TD
node-koa --> koa-art-template
node-koa --> koa-proxies
node-koa --> koa-router
node-koa --> koa-static
node-koa --> koa-views
node-koa --> ...
简单的koa-art-template模板插入语法{{include "layout/xxx.html"}} 即可把jq项目公共部分抽离，采用proxies代理，本地启动node服务即可调用接口进行页面调试。
至于项目打包方面，采用了 gulp 进行打包，其中运用到的插件主要分别如下：
graph TD
gulp --> gulp-replace
gulp --> gulp-file-include
gulp --> gulp-minify-css
gulp --> gulp-babel
gulp --> ...
因为koa-art-template插入的语法为{{include "layout/xxx.html"}}，在gulp打包的时候是无法识别的，这时候会直接输出字符串，gulp-file-include的语法和koa-art-template相似，因此在处理打包的时候通过字符串替换的方法进行文件处理：
src ([viewsInput + '/**/*.html']) .pipe(replace(/\{\{include(.+?)\}\}/g, '@@include($1)')) .pipe(fileinclude({prefix: '@@', basepath: '@file'}))
对于gulp打包给js、css加版本号问题，采用了同样的正则替换方法进行处理：
.pipe(replace(/(<script[^>]?src=")([^>]?.js)("[^>]?>)/g, $1$2?v=${version}$3)) // js加版本号
.pipe(replace(/(<link[^>]?href=")([^>]?.css)("[^>]?>)/g, $1$2?v=${version}$3)) // css加版本号
本文主要讲解一下思路，还有其它gulp的常规代码压缩、添加babel等就不再细说了。 此外，对于图片又进行了一轮压缩（压缩推荐地址tinypng.com/） 、项目小图标自己用ps做了精灵图。(代码探讨，拿来就用gitee.com/aleonzz/jq-…)
