如今开发一个javascript工程，不再是那种把javascript写好，在浏览器里测试测试就完事的流程了。有很多工具可以帮助提高javascript的质量。
比如jslint可以检查代码质量，找出有问题的代码，uglify可以将javascript代码压缩，等等。
而 grunt是一个类似于java里面的ant，maven，gradle这种构建工具。有了它，从而使得javascript工程的编译、打包、测试也能做到像java一样自动化，从而达到持续集成的目的。
本文我们通过modernizer项目来一瞥grunt的功能。
2.环境
Windows7 64bit
nodejs 0.10.29
npm 2.7.1
grunt 0.4.5
grunt-cli 0.1.13
modernizer 3.0.0-alpha.3
3. 安装grunt
3.1 前提是先要安装好nodejs和npm
省略。没装过的同学请参考 http://xpenxpen.iteye.com/blog/2092294
3.2 将nodejs和npm所在的目录加入到PATH
3.3 升级npm到最新版
D:\>npm update -g npm
3.4 安装grunt-cli
D:\>npm install -g grunt-cli
查看grunt版本
D:\>grunt -V grunt-cli v0.1.13
4. modernizer项目初探
4.1 是什么
modernizer是一个javascript类库，用来检测浏览器支持HTML5和CSS3的哪些特性。
4.2 下载
去github克隆下来，地址 https://github.com/Modernizr/Modernizr
接下来的步骤其实都在他的readme.md上写着。
4.3 安装依赖
npm install
注意期间需要下载phantomjs，但是下面这个网址不番羽土啬又是访问不了的，
Downloading https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-windows.zip
所以请将你的IE的代理设置好，然后重开一个cmd窗口执行此命令直到成功为止。
4.4 编译测试
grunt test
下面是在我本机（Windows）上执行的结果
D:\git\opensource\Modernizr>grunt test Running "clean:dist" (clean) task Running "jshint:files" (jshint) task >> 303 files lint free. Running "jshint:tests" (jshint) task >> 66 files lint free. Running "jade:compile" (jade) task >> 3 files created. Running "instrument" task Instrumented 57 files Running "env:coverage" (env) task Running "mochaTest:test" (mochaTest) task ............................................................ ............................................................ ............................................................ ............................................................ .............................................. 286 passing (1s) Running "generate:dest" (generate) task Running "storeCoverage" task Running "connect:server" (connect) task Started connect web server on 127.0.0.1:9999. Running "mocha:test" (mocha) task Testing: http://localhost:9999/test/unit.html ............................................................ ............................................................ ................................................... 171 passing (3s) Testing: http://localhost:9999/test/index.html ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............................................................ ............. 553 passing (3s) >> 724 passed! (5.81s) Running "makeReport" task ...此处省略... Done, without errors.
5. 功能赏析
5.0 高层鸟瞰
首先说一下grunt的两个主要配置文件package.json和Gruntfile.js。
他们位于modernizr工程的根目录下。
package.json定义有哪些依赖，概念类似maven里的dependency
Gruntfile.js定义有哪些task，概念类似ant里的task
可通过以下命令查看当前工程支持哪些task
D:\git\opensource\Modernizr>grunt --help
Options marked with * have methods exposed via the grunt API and should instead
be specified inside the Gruntfile wherever possible.
Available tasks
clean Clean files and folders. *
connect Start a connect web server. *
copy Copy files. *
jade Compile jade templates. *
jshint Validate files with JSHint. *
env Specify an ENV configuration for future tasks in the chain
*
instrument instruments a file or a directory tree
reloadTasks override instrumented tasks
storeCoverage store coverage from global
makeReport make coverage report
mocha Run Mocha unit tests in a headless PhantomJS instance. *
mochaTest Run node unit tests with Mocha *
saucelabs-jasmine Run Jasmine test cases using Sauce Labs browsers *
saucelabs-qunit Run Qunit test cases using Sauce Labs browsers *
saucelabs-yui Run YUI test cases using Sauce Labs browsers *
saucelabs-mocha Run Mocha test cases using Sauce Labs browsers *
saucelabs-custom Run custom test cases using Sauce Labs browsers *
generate Create a version of Modernizr from Grunt *
browserTests Alias for "connect", "mocha" tasks.
nodeTests Alias for "mochaTest" task.
test Alias for "clean", "jshint", "jade", "instrument",
"env:coverage", "nodeTests", "generate", "storeCoverage",
"browserTests", "makeReport" tasks.
travis Alias for "test" task.
build Alias for "clean", "generate" tasks.
default Alias for "jshint", "build" tasks.
以下就是具体的task了。
5.1 clean
顾名思义，用来清除文件和文件夹的
5.2 jshint
http://jshint.com/
https://www.npmjs.com/package/grunt-contrib-jshint
JavaScript代码质量检查工具，可以用来找出一些潜在的代码缺陷。
5.3 jade
https://github.com/jadejs/jade
https://www.npmjs.com/package/grunt-contrib-jade
模板引擎，可以减轻你写html的工作量。它会将自定义的语言转换为html
应用
编译完后可在Modernizr\test目录下发现3个文件，iframe.html，index.html，unit.html，而他们是由Modernizr\test\browser目录下的扩展名为jade的文件生成的。
5.4 istanbul
https://github.com/gotwarlost/istanbul
https://www.npmjs.com/package/grunt-istanbul
名字叫伊斯坦布尔（土耳其城市），是一个代码覆盖率工具。javascript也能像java一样做覆盖率测试，牛！
分以下几个步骤：
1) instrument
2) 运行测试，mochaTest
3） storeCoverage
4） makeReport
编译完后可打开Modernizr\test\coverage\reports\lcov-report\index.html欣赏我们的成果，里面会告诉你哪些代码没被覆盖到。
测试时用到mocha，而mocha又用到前面提到的phantomjs
https://www.npmjs.com/package/grunt-mocha
https://www.npmjs.com/package/grunt-mocha-test
phantomjs是一个服务器端的 JavaScript API 的 WebKit。（用C++写的）
使用场景：
无需浏览器的 Web 测试
页面访问自动化
屏幕捕获
网络监控
6.尾声
通过站在巨人的肩膀上，我们欣赏到了那些一流的javascript项目是怎么做的。有了grunt，javascript工程也能自动化地构建了。笔者不得不感叹技术的日新月异啊！同样的，我们也可以感受到语言之间是相通的，重要的是idea。面向对象，自动构建，自动化测试，代码覆盖率，持续集成，这些idea不是java的专利，javascript也能拥有。
7.参考资料
Testing and Code Coverage With Node.js Apps 介绍了javascript的覆盖率测试，包括istanbul以及如何和sonar集成