我的切图方法最佳实践

这是我的原创文章，原文地址：http://lpgray.me/article/47/

一个通常的前端开发工作，基本都是这样一个流程：

1. 从产品和设计手中取得设计稿

2. 写静态页面与前端交互，也就是俗称的切图

3. 编写前端的JS交互特效

4. 将静态页面交给后端人员套模板（最近还流行前后端分离，套模板也交给前端来搞，前端除了处理页面之外，还负责http请求层的开发，后端只负责数据接口开发，不管展现，但这个模式目前普及度还不高，因此咱们不讨论这个）

5. 联调模板，写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页面。

开发方式

我的切图方式大致如下：

1. 使用 livereload + watch 插件实现监控代码改变浏览器自动刷新

2. 使用Less来组织css

3. JavaScript还是按常规模式来写（至于你想用coffee或者用commonjs来写，这都随便啦）

4. 使用watch + includes来实现监控html改变，然后自动调用grunt-includes功能

5. 让livereload的http server访问grunt-includes转化后的页面
   至此，你已经可以实现一个功能强大，类似后端动态include的前端切图模式！

代码构建

如果需要前端交付压缩后的css和js，你也可以使用process-html来进行css、js的引用替换，让html页面都包含压缩后的代码。

以上这一套开发流程我github上的项目都已经包含了，大家有兴趣可以自己搞下来体会体会。

提供一些额外的参考资料

如何使用gruntjs初始化模板