一个通常的前端开发工作，基本都是这样一个流程：
从产品和设计手中取得设计稿
写静态页面与前端交互，也就是俗称的切图
编写前端的JS交互特效
将静态页面交给后端人员套模板(最近还流行前后端分离，套模板也交给前端来搞，前端除了处理页面之外，还负责http请求层的开发，后端只负责数据接口开发，不管展现，但这个模式目前普及度还不高，因此咱们不讨论这个)
联调模板，写ajax交互
还有比较流行的Webapp开发模式，开发、构建全部依赖框架，诸如angularjs、avalon之类的框架就不属于此次讨论的范围。咱们这次就说切图。
过去的模式分析
我们前端在做静态页面时，经常面对的一个问题就是会有大量重复html代码，比如公共头部、公共页尾部分在每个页面都会包含，而且有的时候需要使用静态页面验证需求，在这种要求下，页面间的跳转也需要你自己写href，此时，如果你负责的项目比较大，页面比较多时，维护起来你会非常痛苦。当然，更可怕的还有巨多的css文件，js文件也需要有条理的维护。
过去的总结
其实，对过去的前端开发模式总结一下，就是前端的模板不够“动态”。如果有一个办法可以让我们像后端套模板似的来去做前端静态页面，那前端肯定可以很好的去规划不同的业务模块，那么CSS/JS文件怎么去组织管理的问题，当然也迎刃而解啦。
我的切图方法介绍
为了解决html巨多，css、js不好管理的情况，我引入了类似后端开发套模板的include机制，将公共页面部分提取出来，比如：header(整站公共导航)、footer(整站页尾)、styles(样式表)、scripts(脚本)，然后在每一个页面中include公共页面，这样就很好维护了。
干货来啦!我将我整个的开发流程总结了一个grunt项目初始模板，大家可以在我的github上下载：https://github.com/lpgray/ray-grunt-template
使用 grunt-includes
gruntjs想必搞前端的同学都很熟悉，这个我就不多介绍。我是使用的一个grunt插件，名字叫grunt-includes，这个插件可以将带有include的html页面转换成常规的html页面。
开发方式
我的切图方式大致如下：
使用 livereload + watch 插件实现监控代码改变浏览器自动刷新
使用Less来组织css
JavaScript还是按常规模式来写(至于你想用coffee或者用commonjs来写，这都随便啦)
使用watch + includes来实现监控html改变，然后自动调用grunt-includes功能
让livereload的http server访问grunt-includes转化后的页面 至此，你已经可以实现一个功能强大，类似后端动态include的前端切图模式!
代码构建
如果需要前端交付压缩后的css和js，你也可以使用process-html来进行css、js的引用替换，让html页面都包含压缩后的代码。
以上这一套开发流程我github上的项目都已经包含了，大家有兴趣可以自己搞下来体会体会。
yyk.39.net/doctor/571072.html
yyk.39.net/hf/zhuanke/f9a98.html
yyk.39.net/hospital/f9a98_detail.html
yyk.39.net/hospital/f9a98_labs.html
yyk.39.net/hospital/f9a98_doctors.html
yyk.39.net/hospital/f9a98_knowledges.html
yyk.39.net/hospital/f9a98_registers.html
yyk.39.net/hospital/f9a98_map.html
yyk.39.net/hospital/177505_lab.html
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=746
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=1072
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=941
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=365
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=1811
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=1530
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=930
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=543
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=378
yyk.39.net/hospital/f9a98_doctors.html?diseaseId=1595
yyk.39.net/doctor/570550.html
yyk.39.net/doctor/571074.html
yyk.39.net/doctor/571073.html
yyk.39.net/hospital/186116_lab.html
yyk.39.net/hospital/186117_lab.html
yyk.39.net/hospital/186118_lab.html
yyk.39.net/hospital/186119_lab.html
yyk.39.net/hospital/186120_lab.html
yyk.39.net/hospital/186121_lab.html
yyk.39.net/hospital/186122_lab.html
yyk.39.net/hospital/186123_lab.html
yyk.39.net/hospital/f9a98_doctors.html?doctorTitle=fuzhuren
yyk.39.net/hospital/f9a98_doctors.html?doctorTitle=zhuren
yyk.39.net/hospital/f9a98_doctors.html?doctorTitle=zhuzhi
yyk.39.net/doctor/571076.html
yyk.39.net/doctor/571077.html
yyk.39.net/doctor/571075.html