裁纸刀下

原文：Gulp as a Development Web Server

作者：Johanes Schickling

---

构建工具 Gulp.js 最近正在变得越来越流行。我们可以用它做很多事，比如合并 Javascript 文件或者压缩图片。如果你还不了解 Gulp.js, 可以看一下《前端构建工具 Gulp.js 上手实例》。

本文将向你介绍如何使用 Gulp.js 来作为本地 Web 服务器，而且是内置 livereload 支持的哦。

在软件开发中使用自动化构建工具的好处是显而易见的。通过工具自动化运行大量单调乏味、重复性的任务，比如图像压缩、文件合并、代码压缩、单元测试等等，可以为开发者节约大量的时间，使我们能够专注于真正重要的、有意义的工作，比如设计业务逻辑，编写代码等等。

对很多前端开发人员而言，Grunt 无疑是这方面的首选。基本上，如果你会用 JavaScript ，那么在一个名为 Gruntfile.js （或者 Gruntfile）的文件中用 Javascript 语言定义自动化任务是非常简单的过程，同时大量的 第三方插件 例如 JSHint, Sass 以及 Uglify 也使得 Grunt 具有了良好的可扩展性。

大多数情况下，Grunt 一直是前端构建工具的首选。但是最近一个名为 Gulp.js 的新工具正在吸引越来越多的人的关注。相比 Grunt, 它具有可读性更强、更利于理解的配置文件，更简单地配置过程。

接下来我们就一起来看看如何安装 Gulp, 并通过一个简单的案例让你感受一下这个新的构建工具。

ISD Webteam的大布同学（twitter：@tc_bryanzhang）在2010年1月翻译了google Page Speed系列中的Optimize browser rendering，很是方便了大家。在此基础上，google又有了更新，我且在此把google新增的部分翻译一下，作为对大布同学译稿的补充。

google这篇文章关注的是资源被下载到客户端以后，在浏览器加载、解释、渲染HTML、CSS和JavaScript阶段的性能优化，提出了5个要点：

1. 使用高效率的CSS选择器
2. 避免CSS expressions
3. 将样式表放在页面顶部
4. 指定图像尺寸
5. 尽早指定文档的字符编码

虽然CSS在表现方面天生具有很多优势，但是如果不是web标准化的盛行，估计CSS不会达到今天这样的热门。所以要说CSS，肯定要从web标准化说起。实际上，对CSS的理解越深，才能越好地理解和使用CSS。

很多人对于web标准化的理解就是“DIV+CSS”，或者“IE、FF、Chrome、Opera、Safari测试无错”，或者就是“通过w3c校验”。实际上，这些都只是web标准化以后附带的一些好处或者说一些表现。web标准化的精髓并不是为了抛弃表格，或者浏览器兼容，或者通过w3c校验。有时候，标准化了的网页未必一定能达到上述这些特征。

绝大部分现代浏览器支持 css 中的 :hover 伪类选择器，可以用于所有 html 元素。这很酷，因为这使你可以仅通过 css 来对表格行()应用鼠标滑过事件(mouseover)时的特殊效果。然而，万恶的IE，对 :hover 伪类顶多只提供了有限的支持，具体支持的程度要取决于你的IE浏览器的具体版本。

Whatever:hover 是一个小小的脚本，它可以迅速、自动地为IE6，IE7，IE8添加标准的 :hover、:active 和 :focus 伪类支持。第三版引入了 ajax 支持，意味着通过 javascript 动态添加到文档中的任意html元素也同样可以在IE中响应 :hover、:active 和 :focus 样式。

网页上的空间是寸土寸金，虽然显示器的分辨率越来越大，可是直到今天，网页设计中仍然是以至少1024×768 像素的支持为主，也就是说，每一屏页面只有区区 955×600像素 的安全尺寸可以用而已。于是，为了在有限的空间里容纳更多的内容，滑动门式的标签切换（Tabs）方式越来越受欢迎。通过滑动门技术，可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。最近我在实际应用中，逐步完善出一种基于 jQuery，但是比 jQuery UI Tabs 插件更小巧也更通用的简单 Tabs 实现。

在这个练习中你将学习如何在 Visual Studio 中创建一个 ASP.NET MVC 应用。并初步了解默认项目结构和一些开发约定。

ASP.NET MVC 框架分为 Model， View 和 Controller 三个部分。模型组件（Model）一般用于维护数据库中的持久数据层的状态。视图组件（View）由控制器挑选并渲染到适当的用户界面。默认状态下， ASP.NET MVC 框架用ASP.NET已有的 ASP.NET 页面（.aspx）、 母版页（.master）以及用户控件（.ascx）等类型来作为浏览器呈现。控制器组件（Controller）组件将用户请求定位到适当的控制器（Controller）行为（Action）和方法（Method），从请求中获取用于行为方法运行的参数值， 并处理行为和方法执行中可能产生的错误。 然后控制器用该请求对应的视图进行渲染。 默认状况下，每个组件存放在 MVC WEB 应用工程的一个独立目录下。

本文简要介绍Google AjaxLib API，并以jQuery为例说明如何在自己的网页中引入由Google提供个CDN托管的jQuery库。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

现在很多人都已经开始习惯于基于各种各样的JS库来编写自己的Javascript，其中尤其以jQuery最多。别的不说，有了jQuery，至少让我们控制页面元素更加方便快捷，让我们在编写js的时候不需要过多地考虑浏览器特性问题了。

说明：在不改变HTML代码的前提下，通过 CSS 和 JavaScript，对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。