二谈javascript中的定时器 在以前的文章【javascript 中的定时器】中，简单的介绍了一下 setTimeout()和 setInterval()两个定时器方法的使用和原理。不过在昨天给我的 node 即时聊天系统添加消息提示时，发现了定时器新的特性。当然，这对于我来说是新的发现，其实这些东西早就已经存在了。 1. 最小运行时间间隔 # 在 setTimeout()和 setInterval()我们能够设定时间间隔，来让下个事件大致发生在哪个时间段。假如我们设置时间间隔是 0 的话，那是不是就会在 0ms 之后执行呢，也就是立即执行。我们可以采用下面的代码输出一下：function get() { var timer = null; var date = null; var diff = 0; var last = 0; var now = 0; var nums = 0; var color = "#000"; var process = document.getElementById("process"); timer = setInterval(function () { date = new Date(); now = date.getTime(); diff = now - last; // 前后两个时间差 last = now; nums++; color = diff === 0 ? "#f00" : "#000"; process.innerHTML += "" + now + ' (' + diff + ")"; if (nums >= 100) { clearInterval(timer); } }, 0); } get(); 我们把每次执行 setInterval()前后的时间差打印到屏幕中（以下数据使用 chrome 42.0.2311.90 版本测试）：1429545782409 (1) 1429545782412 (3) 1429545782414 (2) 1429545782420 (6) 1429545782425 (5) 1429545782430 (5) 1429545782437 (7) 1429545782443 (6) 1429545782449 (6) 1429545782454 (5) 1429545782460 (6) 1429545782466 (6) 1429545782471 (5) 1429545782476 (5) ... 从打印出的数据可以看出，setInterval()的时间间隔为 0ms 时，输出的时间差基本都在 1~10ms 之间，也是能在可以接受的范围内。IE11 下的测试与 chrome 的数据基本一致，而在 firefox 下能够出现0的时间差。 2. 标签不可见时的定时器间隔 # 其实不管是把时间间隔设定为 0ms 还是其他的时间间隔，运行时都会有时间误差的，比设定的间隔多 1~16ms 毫秒左右，有的时候还会相差更多。我们有时会在某个场合对标题进行闪动，提示给用户当前标签页有新消息产生：var backup = document.title; // 存储原标题 function blink() { document.title = document.title == backup ? "【有新消息】" : backup; } blink(); timer = setInterval(blink, 500); 上面的代码能够进行 500ms 的标题轮流闪动，当我们处在当前标签页时，基本感觉不出定时器产生的误差。可是如果我们切换到其他的标签页或者最小化时，我们就能够看到，标题的闪动变慢了很多，差不多提升到 1000ms 左右了。为了更加准确的记录时间间隔的变化，我们特此将上面的代码进行如下的补充，标题进行闪动时记录当前的毫秒时间戳，同时标记出当前标签页可见时的状态和不可见时的状态【查看演示】：// 标题闪动 function blinkTile(title, timeout) { var self = this; var timer = null; var backup = document.title; var last = 0; var process = document.getElementById("process"); self.init = function (title, timeou) { if (title != undefined) { self.title = title; } self.timeout = timeout == undefined ? 500 : timeout; }; self.start = function () { self.stop(); function blink() { document.title = document.title == backup ? self.title : backup; self.check(); } blink(); timer = setInterval(blink, self.timeout); }; self.stop = function () { if (timer != null) { document.title = backup; clearInterval(timer); timer = null; } }; // 打印时间差，同时让滚动条在最下边 self.check = function () { var date = new Date(); var now = date.getTime(); var diff = now - last; last = now; process.innerHTML += "" + now + " (" + diff + ")"; process.scrollTop = process.scrollHeight; }; self.init(title, timeout); } var blink = new blinkTile("【新消息】", 500); blink.start(); // 标签页的可见状态 var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } var process = document.getElementById("process"); // 添加监听器，在title里显示状态变化 document.addEventListener( visibilityChange, function () { if (document[state] == "hidden") { process.innerHTML += '====== 离开 ======'; } else { process.innerHTML += '++++++ 回来 ++++++'; } }, false ); 运行后，我们能够看到程序记录下的数据有（以下仅是部分数据）：1429547223336 (505) 1429547223837 (501) ====== 离开 ====== 1429547225296 (1459) 1429547226296 (1000) 1429547227296 (1000) 1429547228297 (1001) ++++++ 回来 ++++++ 1429547229137 (840) 1429547229637 (500) 我们很清楚的看到，当标签页不可见时（“离开”后），时间差上升了 1000ms 左右；标签页可见时（“回来”后），时间差又恢复到了 500ms 左右。不过在标签页刚切换完的时候，时间差的变化比较大，后来就趋于稳定了。其实浏览器为了在标签页不可见时减少 CPU 的利用率和电池等的消耗，特地将时间间隔进行提高。不过这里要指出的是，在 IE11 下，标签的可见状态不会影响定时器的时间间隔。 3. 如何解决时间间隔会变化的问题（2016 年 1 月 14 日更新） # 在上面的章节中，介绍了setInterval和setTimeout的时间间隔会随着标签页的可见性发生变化。但是在有的情形下，是不希望时间间隔发生变化的，那该如何解决呢。受下面评论的启发，使用web worker可以解决这个这个问题，但是因为 web worker 是 html5 里的标准，低版本的浏览器是支持不了的。当前页面：// 创建一个worker实例 var worker = new Worker("worker.js"); // 向worker.js发送信息 worker.postMessage("hello world"); var last = 0; // 接收从worker.js发送的信息，存储在event.data中 worker.onmessage = function (event) { var diff = event.data - last; last = event.data; $("#content").append(diff + ""); }; // 报错信息 worker.onerror = function (error) { console.log(error.filename, error.lineno, error.message); }; worker.js:// 接收前端页面发送过来的信息，存储在event.data中 onmessage = function (event) { var data = event.data; setInterval(function () { // 向前端页面发送信息 postMessage(Date.now()); }, 500); }; 在上面的例子中，可以看到，当前页面中的 js 和 worker.js 都是是通过postMessage和onmessage进行互相通信的。当我们执行这些代码时，无论当前页面是否可见，setInterval 每次的间隔都是**500**。因此，我们可以在worker.onmessage中进行相应的 DOM 操作。

windows环境下安装jekyll jekyll 在其官方网站上说并不建议在 windows 操作系统安装，可是我们已经在 windows 环境下操作比较习惯了，而安装 linux 或 mac 的成本又比较高。因此，虽然在 windows 安装 jekyll 的流程比较麻烦一些，但是也是能够安装成功的。下面就来讲解如何在 windows 下安装 jekyll，进行一些本地预览等功能。有一个专门的网站来介绍如何在 windows 下按住 jekyll，过程也比较明确，不过全是英文的【jekyll-windows】。下面是我安装的流程和心得。 1. 安装 ruby # jekyll 是基于 ruby 的，因此在安装 jekyll 之前得首先要安装 ruby。【rubyinstaller】，我的电脑是 64 位系统的，因此选择了第二项。你们也可以根据自己的操作系统选择合适的 ruby 版本进行下载安装。开始下载后先不要关闭下载页面，因为一会儿还得下载一个文件。下载后双击进行安装。安装目录当然是可选的啦，我选择安装在了 D:/jekyll/ruby/ 的目录下。在安装的过程中，会出现下面的一个界面：记得选择上第二个选项。这个选项的作用是把 ruby 命令添加到 PATH 变量下，使 ruby 命令能够在任何目录下进行使用。安装完成后，打开 cmd 窗口或者其他 shell 窗口，用ruby -v测试一下，看看能不能输出 ruby 的版本号。如果能正确输出版本号，说明安装成功，直接进入到下一个步骤；如果没有输出的话，那么尝试下如下的擦做：把 ruby 的路径从用户变量添加到系统变量：然后再用ruby -v测试一下。 2. 安装 Ruby DevKit # DevKit 是 windows 平台下编译和使用本地 C/C++扩展包的工具。它就是用来模拟 Linux 平台下的 make, gcc, sh 来进行编译。切换到刚才的下载页面，拉倒最下面，找到“DEVELOPMENT KIT”，然后选择合适的版本进行下载：我选择的是 x64 版本。devkit 的安装过程比较简单，选择你要安装的路径，直接进行下一步就可以了。安装成功后，使用gem -v测试是否安装成功。安装成功后，运行如下两个命令：ruby dk.rb init ruby dk.rb install 如图所示： 3. 安装 jekyll # 终于可以安装 jekyll 了，是不是很兴奋啊。是不是迫不及待的想要用gem install jekyll 进行安装了呢。你高兴的太早了，使用这个命令进行安装时，你会发现，命令行卡住了，一直在等待！因为某些特殊的原因，我们直接使用 rubygems 的官方链接会特别特别的慢。不过庆幸的是，国内的淘宝有 rubygem 的镜像：gem sources --remove https://rubygems.org/ // 删除官方链接 gem sources -a https://ruby.taobao.org/ // 添加淘宝镜像链接 gem sources -l // 查询是否替换成功 如果已经替换成功，就可以安装 jekyll 了。在一串的提示命令之完成之后，就可以用jekyll -v测试 jekyll 是否安装成功了，如果能够输出版本号，就说明安装成功了。不过我在安装的过程中，还出现了图片中的提示，no such name，然后我就照着提示的 url 下载了 gz 压缩包，然后解压到 devkit 的目录下，再次执行：gem sources -a https://ruby.taobao.org/ // 添加淘宝镜像链接 gem sources -l // 查询是否替换成功 这次的镜像路径应该是替换成功了。

webkit内核 WebKit 是一个排版引擎，主要设计是用来让网页浏览器绘制网页。webkit 不是一个完整的不可分割的部分，它主要包括 webcore 渲染引擎、javascriptcore 的 js 引擎和其他的元组件等。 1. webkit 简介 # webcore 包含了浏览器引擎的核心部分，如处理 html、DOM、css、svg、获取资源、渲染页面过程控制、回调/通知外壳程序以及与 JavaScript 实现的 Binding 等。ebCore 是一个由 WebKit 专案所开发的布局（Layout）、渲染（Rendering）及 HTML 和 SVG 的 DOM 函式库，完整的程式码皆由 GNU 宽通用公共许可证所授权，WebKit 框架包装了 WebCore 及 JavaScriptCore，并提供一个 Objective-C 应用程序接口来接介由 C++所开发的 WebCore 渲染引擎及 JavaScriptCore 脚本引擎，透过 Cocoa API 就可以在应用程序中很简单的使用这些元件。之后的版本同时包含了一个跨平台的 C++抽象平台，并且提供各种 API 使用。JavaScriptCore 是一个在 WebKit 中提供 JavaScript 引擎的框架，而且在 OS X 作为其他内容的脚本引擎。JavaScriptCore 最初是为 KDE 的 JavaScript 引擎（KJS）函式库及 PCRE 正则表达式函式库，JavaScriptCore 从 KJS 及 PCRE 复刻之后，已比原先进步了许多，有了新的特色以及极大的效能改进。在 2008 年六月二日，WebKit 专案宣布，将被重写为"SquirrelFish"，它是一个字节码直译器，这个专案演变成 SquirreFish Extreme（简称为 SFX，市场称之为 Nitro），首次公开于 2008 年九月十八日，它会将 Javascript 编译为原生的机器语言，不再需要字节码直译器，同时加速了 JavaScript 的执行效率。WebKit 的优势在于高效稳定，兼容性好，且源码结构清晰，易于维护。 2. webkit 起源 # 2.1 webkit 来源 # WebKit 的 HTML 及 JavaScript 程式码源自于 KDE 的 KHTML 及 KJS 函式库，现在已经由 KDE、苹果电脑、诺基亚、Google、Bitstream、RIM、Igalia 等进行独立专案开发。OS X、Windows、GNU/Linux 以及其他类 Unix 系统操作系统，皆支援这个专案。webkit 的程式码源自 1998 年所开发的 KDE 的 HTML 排版引擎 HTML 及 KDE 的 JavaScript 引擎 KJS 的程式码。Apple 的工程师 Don Melton 与 2001 年 6 月 25 日开始了 webkit 这个专案，当时的 webkit 仅为 KTML 及 KJS 的复刻，不过经过 Apple 自己的研发与修改后，重新命名为 webcore 及 JavaScriptcore。KHTML 和 webcore 有着两个不同的团队进行维护，各自的目的也不是很相同，所以他们程式码互相补丁的难度越来越高。后再 Apple 在 CVS 发布了他们自己维护的 webkit 版本，在 apple 及 KHTML 开发者也一起维护 webkit，许多 KHTML 的开发者也成为了 webkitSVN 代码库的审查者及提交者。 2.2 webkit 开源 # 在 2005 年六月七日，Safari 开发者戴夫·海厄特（Dave Hyatt）于他的 blog 宣布 Apple 将把 Webkit 开源（之前仅有 WebCore 及 JavaScriptCore 开源），并且开放了 WebKit 的 CVS 程式库以及臭虫数据库工具。这项消息由苹果电脑软件工程的高阶副总（Senior Vice President）Bertrand Serlet 于苹果电脑 2005 年的 Worldwide Developers Conference 公开。在 2005 年十二月月中，可缩放向量图形的支援被加入了标准版本，在 2006 年一月月初，这项程式码从 CVS 转移至 Subversion。WebKit 的 JavaScriptCore 及 WebCore 元件目前以 GNU 宽通用公共许可证方式授权，而其他的 WebKit 元件则是以 BSD 授权公开。在 2007 年一开始，开发团队开始实现层叠样式表（CSS）的扩充，包含动画、转换（transitions）以及 2D 和 3D 的转场（transform），这样的扩充在 2009 年 W3C 的标准中被列入草案。在 2007 年十一月，这项专案宣布，他们已经完成了 HTML5 媒体特色的支援，允许页面中以原生的方式嵌入影片，并且可以被 script 所控制。在 2008 年六月二日，WebKit 专案宣布他们重写了 JavaScriptCore，被称为"SquirrelFish"，它是一个字节码直译器（Bytecode Interpreter），这项专案验后来变成 SquirrelFish Extreme（SFX），它可将 JavaScript 编译为机器语言而不再需要直译器，这样的做法加速了 JavaScript 的执行，这项专案于 2008 年九月 18 发布。一开始，SFX 仅支援 x86 架构，于 2009 年一月底，SFX 于 OSX 支援了 x86-64 架构，并且在该平台通过了所有的测试。WebKit2 发布于 2010 年 4 月 8 日，WebKit2 的目标是将元件抽象化，并提供更干净的网页渲染，它会利用从周围的界面或是应用程序的壳，建立一个环境使网页的内容（JavaScript、HTML、排版等等）将会在另外一个进程(Process)运行，比起 WebKit，这个抽象化的做法打算令 WebKit2 可重复使用一个更简单的程序。因为 WebKit2 对比起 WebKit 有一个不相容的 API，所以导致他的名字被改变为 WebKit2。目前 WebKit2 仅开放于 Mac、Windows 及 MeeGo-Harmattan。 3. webkit 兴起与使用 # WebKit 目前作为 Apple Safari 及 Google Chrome（直到版本 27）等浏览器的主要引擎。根据 StatCounter 的浏览器市场份额调查，于 2012 年 11 月，Webkit 市占超过了 40%，它已经成为拥有最大市场份额的排版引擎，超越了 Internet Explorer 所使用的 Trident 及 Firefox 所使用的 Gecko 引擎。Webkit 也作为一些实验性质浏览器的基础引擎，包含 Amazon Kindle 电子书阅读器，同时也使用在下列行动操作系统的预设浏览器，包含苹果电脑 iOS、Android, BlackBerry Tablet OS、Bada、Tizen 及 webOS。WebKit 的 C++应用程序接口提供了一系列的 Class 让我们可以在视窗上显示网页内容，并且实现了一些浏览器的特色，包含使用者连结点击、管理前后页面列表以及使用者曾经拜访过的历史页面等等。作为渲染引擎使用的 WebKit，被使用在 Safari 及 Google Chrome 浏览器于 Windows、OS X、iOS 及 Android 平台（然而，Chrome 仅仅使用 WebCore，而 JavaScript 引擎及多工系统则自行开发）。其他的在 OS X 底下的应用程序也使用 WebKit，例如 Apple 的 e-mail 用户端软件 Mail 以及微软的个人信息管理系统 Microsoft Entourage 2008，皆使用 WebKit 来渲染 HTML 内容的 e-mail 讯息。Opera 软件公司于 2013 年初宣布，他们将停止他们自行开发的 Presto 排版引擎，由 Webkit 专案取代，在未来将会以 Webkit 来取代，并贡献给 Webkit 专案。在 2013 年四月 3 日，Google 宣布他将自行开发 WebCore 的分支，也就是 Blink 引擎。Chrome 的开发者由于希望在浏览器的开发上拥有更大的自由度，同时避免与上游冲突，更可透过移除 Chrome 没有使用的元件而简化自己的程式库，所以决定开发 WebKit 的分支版本。同时 Opera 软件在同年稍早也宣布，他们将自有引擎转换到 Chromium 的程式库，在此时也同时转换到 Blink 的分支。根据这份声明，WebKit 的开发者开始讨论移除 Chrome 相关程式码的可能性，以精简整个 WebKit 程式库。

2015年4月份总结 不知不觉已经到5.1劳动节了， 上次的3月份总结没有写， 当时觉得3月份也没发生什么事儿。 现在将3、 4月份发生的一些事情一起总结一下吧。 1. 工作 # 其实在工作中才是学习的最好的途径， 工作中有很多的问题等待着我们去解决， 我们就会通过网络或者他人来寻找答案。 做的多了， 自然也就会去想有没有更好的方法呢。 1.1 公司的5周年庆促销 # 301是公司的5周年，很多的工作在年前都弄的差不多了， 年后回来也没什么事儿， 周年促销时也不是我值的班。 这个促销过的好像没我什么事儿似的。 大促销之后， 进入了一段平整期， 也没什么大的需求， 大家也都好好休息一下。 1.2 同事离职 # 年后是离职和求职的高峰期， 公司里的员工离职也是很正常的事儿。 其他人离职的时候也没什么感觉， 毕竟跟自己没什么交集。 这今天， 一直带着我的一个高手要走了， 心里顿时觉得不是滋味， 当时觉得他也挺好的， 在也没对公司表现出有不满， 可是不声不响的就要走了。 不过人往高处走，小庙里供不了大佛。其实这对我也是一种挑战， 以前都是别人带着我做东西， 很多事情都是别人帮我安排好的， 有些事情要我做， 有些事情要别人做， ‘应该这么做这么做’ 。 带着我的那个高手走了之后， 所有的事情都是我来担着了， 需求过来之后是做还是不错， 如果做应该怎么做。以前写代码提交后， 也会有人把关， 这些代码应该怎样优化， 应该怎样拆分使其更加的明确。 现在所有的事情都是我自己拿主意了。 1.3 静态化 # 为了更高效的利用缓存， 公司决定将商品详情页进行静态化。 对详情页中不经常变化的内容读取缓存的内容， 缓存可能有3天或者7天的时间， 对于经常变化的内容采用ajax异步读取实时数据，这个工作由我和接口开发人员共同完成， 也是个不小的挑战啊。 2. 生活 # 生活总是要继续的。 2.1 同学找工作 # 其实我同学找什么工作不重要， 主要是以前一直是我一个人在一个小间里生活， 也就看看视频， 写写代码， 业余时间也就算过去了。 同学来我这儿之后， 生活也丰富了很多。 聊聊天， 说说话， 打打闹闹。 3. 学习 # 下班回家之后还有不少的时间， 总不能回家之后什么事儿也不干吧。 除了工作学习之外， 业余时间的学习也很重要。 3.1 leetcode # 开始在leetcode上进行算法练习了， 目前已经完成了12道题目， 目标是在今年年底能够完成50道的题目， 能不能完成？ 谁知道呢！ 3.2 学习node # 利用更新本地的google hosts的机会， 学习了一下node。 后来又用node写了几个小东西。比如有： node-host 抓取网页google hosts 更新到本地【github-node-hosts】 node-chat socket即时聊天【github-node-chat】 node-crawler 抓取百度贴吧帖子内容【github-node-crawler】

gulp:任务自动管理工具 Gulp 与 Grunt 一样，也是一个自动任务运行器。它充分借鉴了 Unix 操作系统的管道（pipe）思想，很多人认为，在操作上，它要比 Grunt 简单。 1. 安装 # gulp 需要全局安装，然后再在项目的开发目录中安装为本地模块。先进入项目目录，运行下面的命令。$npm install -g gulp $npm install --save-dev gulp 2. gulpfile.js # 项目根目录中的 gulpfile.js，是 Gulp 的配置文件。它大概是下面的样子。var gulp = require('gulp'); gulp.task('default', function () { // code }); 下面就是一个典型的 gulpfile.js 文件。var gulp = require('gulp'), uglify = require('gulp-uglify'); gulp.task('minify', function () { gulp.src('js/app.js').pipe(uglify()).pipe(gulp.dest('build')); }); 上面代码中使用了 gulp-uglify 模块。在此之前，需要先安装这个模块。$npm install --save-dev gulp-uglify gulpfile.js 加载 gulp 和 gulp-uglify 模块之后，使用 gulp 模块的 task 方法指定任务。task 方法有两个参数，第一个是任务名，第二个是任务函数。在任务函数中，使用 gulp 模块的 src 方法，指定所要处理的文件，然后使用 pipe 方法，将上一步的输出转为当前的输入，进行链式处理。在上面代码中，使用两次 pipe 方法，也就是说做了两种处理。第一种处理是使用 gulp-uglify 模块，压缩源码；第二种处理是使用 gulp 模块的 dest 方法，将上一步的输出写入本地文件，这里是 build.js（代码中省略了后缀名 js）。从上面的例子中可以看到，gulp 充分使用了“管道”思想，就是一个数据流（stream）：src 方法读入文件产生数据流，dest 方法将数据流写入文件，中间是一些中间步骤，每一步都对数据流进行一些处理。下面是另一个数据流的例子。gulp.task('js', function () { return gulp.src('js/*.js').pipe(jshint()).pipe(uglify()).pipe(concat('app.js')).pipe(gulp.dest('build')); }); 上面代码使用 pipe 命令，分别进行 jshint、uglify、concat 三步处理。 3. gulp.src() # gulp 模块的 src 方法，用于产生数据流。它的参数表示所要处理的文件，一般有以下几种形式。 js/app.js：指定确切的文件名。js/.js：某个目录所有后缀名为 js 的文件。js/**/.js：某个目录及其所有子目录中的所有后缀名为 js 的文件。!js/app.js：除了 js/app.js 以外的所有文件。*.+(js|css)：匹配项目根目录下，所有后缀名为 js 或 css 的文件。 src 方法的参数还可以是一个数组，用来指定多个成员。gulp.src(['js/**/*.js', '!js/**/*.min.js']); 4. gulp.task() # gulp 模块的 task 方法，用于定义具体的任务。它的第一个参数是任务名，第二个参数是任务函数。下面是一个非常简单的任务函数。gulp.task('greet', function () { console.log('Hello world!'); }); task 方法还可以指定按顺序运行的一组任务。gulp.task('build', ['css', 'js', 'imgs']); 上面代码先指定 build 任务，它按次序由 css、js、imgs 三个任务所组成。注意，由于每个任务都是异步调用，所以没有办法保证 js 任务的开始运行的时间，正是 css 任务运行结束。如果希望各个任务严格按次序运行，可以把前一个任务写成后一个任务的依赖模块。gulp.task('css', ['greet'], function () { // Deal with CSS here }); 上面代码表明，css 任务依赖 greet 任务，所以 css 一定会在 greet 运行完成后再运行。如果一个任务的名字为 default，就表明它是“默认任务”，在命令行直接输入 gulp 命令，就会运行该任务。 5. gulp.watch() # gulp 模块的 watch 方法，用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。gulp.task('watch', function () { gulp.watch('templates/*.tmpl.html', ['build']); }); 上面代码指定，一旦 templates 目录中的模板文件发生变化，就运行 build 任务。watch 方法也可以用回调函数，代替指定的任务。gulp.watch('templates/*.tmpl.html', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); }); 另一种写法是 watch 方法所监控的文件发生变化时（修改、增加、删除文件），会触发 change 事件。可以对 change 事件指定回调函数。var watcher = gulp.watch('templates/*.tmpl.html', ['build']); watcher.on('change', function (event) { console.log('Event type: ' + event.type); console.log('Event path: ' + event.path); }); 除了 change 事件，watch 方法还可能触发以下事件。 end：回调函数运行完毕时触发。error：发生错误时触发。ready：当开始监听文件时触发。nomatch：没有匹配的监听文件时触发。 watcher 对象还包含其他一些方法。 watcher.end()：停止 watcher 对象，不会再调用任务或回调函数。watcher.files()：返回 watcher 对象监视的文件。watcher.add(glob)：增加所要监视的文件，它还可以附件第二个参数，表示回调函数。watcher.remove(filepath)：从 watcher 对象中移走一个监视的文件。 6. gulp-load-plugins 模块 # 一般情况下，gulpfile.js 中的模块需要一个个加载。var gulp = require('gulp'), jshint = require('gulp-jshint'), uglify = require('gulp-uglify'), concat = require('gulp-concat'); gulp.task('js', function () { return gulp .src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build')); }); 上面代码中，除了 gulp 模块以外，还加载另外三个模块。这种一一加载的写法，比较麻烦。使用 gulp-load-plugins 模块，可以加载 package.json 文件中所有的 gulp 模块。上面的代码用 gulp-load-plugins 模块改写，就是下面这样。var gulp = require('gulp'), gulpLoadPlugins = require('gulp-load-plugins'), plugins = gulpLoadPlugins(); gulp.task('js', function () { return gulp .src('js/*.js') .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter('default')) .pipe(plugins.uglify()) .pipe(plugins.concat('app.js')) .pipe(gulp.dest('build')); }); 上面代码假设 package.json 文件包含以下内容。{ "devDependencies": { "gulp-concat": "~2.2.0", "gulp-uglify": "~0.2.1", "gulp-jshint": "~1.5.1", "gulp": "~3.5.6" } } 7. gulp-livereload 模块 # gulp-livereload 模块用于自动刷新浏览器，反映出源码的最新变化。它除了模块以外，还需要在浏览器中安装插件，用来配合源码变化。var gulp = require('gulp'), less = require('gulp-less'), livereload = require('gulp-livereload'), watch = require('gulp-watch'); gulp.task('less', function () { gulp.src('less/*.less').pipe(watch()).pipe(less()).pipe(gulp.dest('css')).pipe(livereload()); }); 上面代码监视 less 文件，一旦编译完成，就自动刷新浏览器。