这是个人原创文章，原文地址：http://lpgray.me/article/47/css
一个一般的前端开发工做，基本都是这样一个流程：html
从产品和设计手中取得设计稿前端
写静态页面与前端交互，也就是俗称的切图git
编写前端的JS交互特效angularjs
将静态页面交给后端人员套模板（最近还流行先后端分离，套模板也交给前端来搞，前端除了处理页面以外，还负责http请求层的开发，后端只负责数据接口开发，无论展示，但这个模式目前普及度还不高，所以我们不讨论这个）github
联调模板，写ajax交互ajax
还有比较流行的Webapp开发模式，开发、构建所有依赖框架，诸如angularjs、avalon之类的框架就不属于这次讨论的范围。我们此次就说切图。npm
咱们前端在作静态页面时，常常面对的一个问题就是会有大量重复html代码，好比公共头部、公共页尾部分在每一个页面都会包含，并且有的时候须要使用静态页面验证需求，在这种要求下，页面间的跳转也须要你本身写href，此时，若是你负责的项目比较大，页面比较多时，维护起来你会很是痛苦。固然，更可怕的还有巨多的css文件，js文件也须要有条理的维护。后端
其实，对过去的前端开发模式总结一下，就是前端的模板不够“动态”。若是有一个办法可让咱们像后端套模板似的来去作前端静态页面，那前端确定能够很好的去规划不一样的业务模块，那么CSS/JS文件怎么去组织管理的问题，固然也迎刃而解啦。浏览器
为了解决html巨多，css、js很差管理的状况，我引入了相似后端开发套模板的include机制，将公共页面部分提取出来，好比：header（整站公共导航）、footer（整站页尾）、styles（样式表）、scripts（脚本），而后在每个页面中include公共页面，这样就很好维护了。
干货来啦！我将我整个的开发流程总结了一个grunt项目初始模板，你们能够在个人github上下载：https://github.com/lpgray/ray-grunt-template
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上的项目都已经包含了，你们有兴趣能够本身搞下来体会体会。