提高Web开发效率的几个利器(含教程)

标签: 开发 bower fidder Firebug grunt | 发表时间:2014-06-28 17:42 | 作者:伯乐
出处:http://blog.jobbole.com

面对复杂的 Web 应用的开发,良好的流程和工具支持是必不可少的,它们可以让日常的开发工作更加顺畅、更加高效。本文介绍了6个Web开发利器以及相关的教程,帮助你在开发、调试、集成和发布过程极大地提高效率。

Sublime Text

SublimeText 是一款非常精巧的文本编辑器,适合编写代码、做笔记、写文章。它用户界面十分整洁,功能非同凡响,性能快得出奇。这些非常棒的特性包括任意跳转(Goto Anything)、多重选择(multiple selections)、指令面板(command palette)、免打扰模式(distraction free mode)、分区编辑(split editing)、快速项目切换(instant project switch),你还可以随意地自定义更多功能。

也许你并不了解或者熟悉Sublime Text,这不奇怪。每个程序员都有符合自己使用习惯的IDE或者编辑器,一般也不会轻易去更换。不过,程序员的提升需要不断地尝试,编辑器也不例外。

教程:这里有一个长度不到1小时的免费 中文视频,帮助你快速地了解并上手Sublime Text。

Yeoman

Yeoman 是一个新兴的工具。它结合了 Yo、Grunt 和 Bower 等工具,组成了一个完整的工具集合,提供各种 Web 应用开发中所需的实用功能。Yeoman 的最大优势在于它整合了各种流行的实用工具,提供了一站式的解决方案,使得 Web 应用开发中的很多方面变得简单。Yeoman 使得开发人员可以专注于应用本身的实现,而不用在搭建应用的基础结构、进行任务构建和其他辅助任务上花费过多的时间和精力。

教程: Yeoman官方教程

Grunt

Grunt 是一个 JavaScript 任务执行工具,其核心理念是自动化。在 Web 应用开发过程中,会有很多不同的任务需要执行。这些任务与 Web 应用开发中的不同类型的组件和所处的阶段相关。比如对 JavaScript 来说,在开发阶段会需要使用 JSLint 和 JSHint 这样的工具来检查 JavaScript 代码的质量;在构建阶段,从前端性能的角度出发,会需要把多个 JavaScript 文件在合并之后进行压缩。对于 CSS 文件也有类似的任务需要执行。其他的任务还包括压缩图片、合并压缩和混淆 JavaScript 代码以及运行自动化单元测试用例等。借助Grunt,这些繁琐的重复工作,可以自动化完成。让前端开发工程师可以专注与开发本身,极大地提高了开发效率。

教程:一个小时的免费中文 视频教程,快速了解Grunt。

Bower

Bower 是一个前端库管理工具,可以很好的解决在 Web 应用中引用第三方库时可能遇到的问题。在 Web 应用开发中,一般都会使用很多第三方 JavaScript 库,比如 jQuery 和 Twitter Bootstrap 这样的常见库。传统的做法是从这些库的网站上直接下载所需版本的 JavaScript 库文件,放到 Web 应用的某个目录中,然后在 HTML 页面中引用。这种做法的问题在于引入了很多额外的工作量,包括查找所需的 JavaScript 库文件、下载和管理等。一些 JavaScript 库有很多个版本,也依赖于其他 JavaScript 库。对于给定版本的某个 JavaScript 库,需要找到它所依赖的兼容版本的其他 JavaScript 库。这可能是一个递归的过程,会花费很多的时间。Bower 所提供的功能类似于 Java 开发中会用到的 Apache Ivy、Apache Maven 或 Gradle 等工具。

教程: 上手Bower (英文)

Firebug

Firebug 是Firefox下的一款扩展。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀,从各个不同的角度剖析Web页面内部的细节层面,给Web开发者带来很大的便利。

Firebug 除了功能强大,还非常容易上手。大多数Web开发者对它并不陌生,但未必完全了解这个神器,并最大化地发挥它的价值。

教程:全面介绍Firebug的免费中文 视频教程

Fiddler

Fiddler 是最强大最好用的Web调试工具之一。它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统,并且能使用.net语言进行扩展。你对HTTP 协议越了解, 你就能越掌握Fiddler的使用方法. 你越使用Fiddler,就越能帮助你了解HTTP协议.Fiddler无论对开发人员或者测试人员来说,都是非常有用的工具。

教程:不到一个小时的免费中文 视频教程,快速了解Fiddler。

开发工具之外的Tips

靠谱的“梯子”

技术是无边界的,然而我们却被限制在局域网里。与其花费很多精力去寻找各种免费的代理和工具,不如找一个靠谱的“梯子”,或者自己搭建一个,通过SSH通道,然后再结合使用浏览器扩展,这并不难。即使是需要为梯子购买VPS,这种小额的花费也是非常值得的!因为这种投资可以节省你大量的时间,而且帮助你保持通畅的思维,工作容易进入“流”状态(参见 维基百科),而不是“撞墙”后思路中断。

善用搜索引擎

首先选择一个好的搜索引擎,然后掌握一些常用的搜索技巧。对于程序员,Google是不二之选。访问不了Google?请参考上一条。做了一个明智的选择后,你需要掌握一些常用的搜索技巧,帮助你快速地找到需要的内容。大海捞针,信手拈来。这篇文章《 如何使用GOOGLE高级搜索技巧》结合实例分享了很多实用的方法,推荐一读。

结束语

在Web开发过程中,还有哪些对你的开发效率有帮助的工具和技巧呢?请在评论中分享一下私藏的干货吧~

参考资料:

Fiddler 教程
Yeoman:Web 应用开发流程与工具
Yeoman官方教程
如何在Google中进行搜索》 (打不开?请参考开发工具之外的第一条Tips)
如何用好 Google 等搜索引擎?
Flow (psychology)

提高Web开发效率的几个利器(含教程),首发于 博客 - 伯乐在线

相关 [web 开发] 推荐:

Web开发入门(转载)

- linchanx - Starming星光社最新更新
Web应用的竞争异常激烈,开发难度也是入门容易做好很难,所以第一次开发的应用不成功是很正常的事情. 不过这正是一个积累的过程,反正你需要的只是电脑和少量服务器经费,所以多磨练几次,水平自然会提高. 2, 习惯阅读及查阅英文资料. 前沿信息基本源自美国,翻译的东西不及时,不全,很多水平不高,再加之中文原创资料毕竟很有限,因此是否能熟练地查阅英文资料决定了你获取信息的 及时性和质量.

Spring MVC 与 web开发

- - 码蜂笔记
项目组用了 Spring MVC 进行开发,觉得对里面的使用方式不是很满意,就想,如果是我来搭建开发环境,我会怎么做. 下面就是我的想法,只关注于 MVC 的 View 层. 现在基本上都是用 ajax 来调用后台接口,拿到 json格式的数据再展示,有的人直接返回数据,却没有考虑异常的情况,我觉得返回的报文里必须包含表示可能的异常信息的数据和业务响应数据.

web开发利器之grunt

- - CSDN博客Web前端推荐文章
grunt不难,它主要依赖的是nodeJS的npm包管理器,和一个JSON及一个JS文件,先说说npm包管理器,玩过nodeJS的对它应该都很熟悉,在这里我们只需要安装nodeJS即可(新版的nodeJS基本都集成了npm),至于nodeJS的安装可以 点这里,这这篇文章就不做详细介绍,安装完后打开命令管理器(nodeJS安装完后的终端)输入:.

Web开发者必备:Web应用检查清单

- - ITeye博客
想做一个高质量的Web应用,前前后后要做的事情非常多. 国外开发者 Ata Sasmaz 为 Web 开发者制作分享了一份检查清单,包括应用开发、性能、安全、分析、可用性、可靠性、转换策略、竞争策略这些方面需要注意的事项. 清单内容可能不全面,欢迎大家在评论中补充. JavaScript 允许捕获异常.

Web应用程序的开发步骤

- xxg - 月光博客
  如今已进入了web2.0高速发展的互联网时代,各种互联网的Web应用程序如雨后春笋般出现. 那么作为一名Web开发人员,怎样去开发一款优秀的Web应用程序呢. 这个问题没有一个简单的答案,甚至那些教育机构都未必能清楚的知道. 所以,像大多数在这个领域里的web开发人员一样,我们只是通过去做,去实验才学会了这些.

Web开发人员速查卡

- abcd - 酷壳 - CoolShell.cn
无论你是多牛的程序员,你都无法记住所有的东西. 而很多时候,查找某些知识又比较费事. 所以,网上有很多Cheat Sheets,翻译成小抄也好 ,速查卡也好,总之就是帮你节省 时间的. 之前给大家介绍过Web设计的速查卡、25个jQuery的编程小抄,还有程序员小抄大全,今天转一篇开发人员的速查卡,源文在这里.

平台是Web开发的未来吗?

- iyuan - 伯乐在线 -博客
  导读:本文是Arjun Khanna关于平台的出现以及它们如何简化Web开发的个人分析,也分析了平台的缺点和它们能够继续存在的因素.   即便现在大部分网站开发人员所构建的网站在结构上非常相似,或是至少在布局方面会有一些根本的共同之处,如果你问一下,他们大多会说他们还有一大堆的苦差使要头疼呢. 虽然客户几乎都要求顶上有横幅,导航条在左边,页面布局不超过三列,但是这并不使他们的工作更简单.

Web开发框架安全杂谈

- goodman - 80sec
最近框架漏洞频发,struts任意代码执行、Django csrf token防御绕过、Cakephp代码执行等等各大语言编程框架都相继暴出高危漏洞,这说明对于编程框架的安全问题已经逐渐走入安全工作者的视线. Web开发框架就相当于web应用程序的操作系统,他决定了一个应用程序的模型结构和编程风格.

最好的开源Web开发资源

- 陈晖 - Solidot
51开源社区 写道 "B2bweb.fr对“开源中最好的Web开发的资源(中文)进行了汇总.

Web 开发程序员招聘

- GLORY - 云风的 BLOG
前两天在 blog 里提到了 web 前端程序员招聘的消息 , 结果这两天收到了好多热情洋溢的 email , 真是受宠若惊. 上次说的不详细,其实也没完全想好,只是之前在讨论公司架构的时候提到了这个岗位. 昨天晚上又讨论了一下,把需求细化了一些. 我个人,作为程序员,对 web 前端开发领域没有太多了解,很惭愧.