通过modernizer一瞥grunt的功能

1.引言
如今开发一个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集成