我的切图方法最佳实践

标签: grunt web前端开发 | 发表时间:2014-12-27 22:38 | 作者:zhangyang
出处:http://segmentfault.com/blogs

这是我的原创文章,原文地址: http://www.h5shop.org/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初始化模板

相关 [方法 最佳实践] 推荐:

我的切图方法最佳实践

- - SegmentFault 最新的文章
这是我的原创文章,原文地址:. 一个通常的前端开发工作,基本都是这样一个流程:. 从产品和设计手中取得设计稿. 写静态页面与前端交互,也就是俗称的切图. 将静态页面交给后端人员套模板(最近还流行前后端分离,套模板也交给前端来搞,前端除了处理页面之外,还负责http请求层的开发,后端只负责数据接口开发,不管展现,但这个模式目前普及度还不高,因此咱们不讨论这个).

Docker 最佳实践:5 个方法精简镜像

- - IT瘾-dev
本文记录了精简Docker镜像尺寸的必要性及好处. 上篇文章回顾: HBase实战:记一次Safepoint导致长时间STW的踩坑之旅. 精简Docker镜像的好处很多,不仅可以节省存储空间和带宽,还能减少安全隐患. 优化镜像大小的手段多种多样,因服务所使用的基础开发语言不同而有差异. 本文将介绍精简Docker镜像的几种通用方法.

jQuery最佳实践

- andi - 阮一峰的网络日志
上周,我整理了《jQuery设计思想》. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery". 今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks).

PHP最佳实践

- xiangqian - 阮一峰的网络日志
虽然名字叫《PHP最佳实践》,但是它主要谈的不是编程规则,而是PHP应用程序的合理架构. 它提供了一种逻辑和数据分离的架构模式,属于MVC模式的一种实践. 我觉得,这是很有参考价值的学习资料,类似的文章网上并不多,所以一边学习,一边就把它翻译了出来. 根据自己的理解,我总结了它的MVC模式的实现方式(详细解释见译文):.

MongoDB最佳实践

- - NoSQLFan
将 MongoDB加入到我们的服务支持列表中,是整个团队年初工作计划中的首要任务. 但我们感觉如果先添加一项对NoSQL存储的支持,而不是先升级已支持的关系型数据库,可能对用户不太好,毕竟目前的用户都使用关系型数据库. 所以我们决定将引入MongoDB这项工作放到升级MySQL和PostgreSQL之后来做.

Dockerfile 最佳实践

- - DockOne.io
在容器领域,Docker 公司提出的容器镜像已经成为目前容器打包交付的事实标准. 构建镜像需要编写 Dockerfile,如何编写一个优雅的 Dockerfile 呢. 在 Docker 公司的官方文档中给出了一篇:《 Best practices for writing Dockerfiles》.

文章: Grails最佳实践

- - InfoQ cn
我在IntelliGrape工作,这是一家专门使用Groovy & Grails进行开发的公司. 本文是我们Grails项目遵循的最佳实践的基本清单,收集自邮件列表、Stack Overflow、博文, 播客和 IntelliGrape的内部讨论. 它们分为控制器、服务、Domain、视图、TagLib、测试和其他.

PHP最佳实践(译)

- - CSDN博客Web前端推荐文章
原文:  PHP Best Practices-A short, practical guide for common and confusing PHP tasks. 译者: youngsterxyf. 本文档最后审阅于2013年3月8日. 由我, Alex Cabal,维护该文档. 我编写PHP程序已有很长一段时间了,当前我 经营着 Scribophile,由认真作家组成的一个在线写作团体,  Writerfolio,为自由职业者提供的一个易用写作工具集,以及  Standard Ebooks,一个图文并茂、无数字版权管理的公共领域电子书出版商.

Log4j最佳实践(原) - Mainz

- - 博客园_Mainz's Blog
本文是结合项目中使用 Log4j总结的最佳实践,非转载. 网上可以找到的是这一篇《 Log4j最佳实践》. 本来 Log4j使用是非常简单的,无需多介绍其用法,这只是在小型项目中;但在 大型的项目中使用 log4j不太一样. 大型项目非常依赖日志,因为解决线上问题必须依靠log,依靠大量的日志.

再谈RestAPI最佳实践

- - 企业架构 - ITeye博客
http://www.javacodegeeks.com/2014/05/rest-api-best-practices-reloaded.html ,仅供学习和参考,转载请注明出处. 近一年半,我参与了2到3个项目的工作,这些项目涉及到大量供“外部”使用的Rest API,稍后我们再来解释为什么要将“外部”这个词放在引号之中.