如今開發一個javascript工程，不再是那種把javascript寫好，在瀏覽器裏測試測試就完事的流程了。有很多工具可以幫助提高javascript的質量。
比如jslint可以檢查代碼質量，找出有問題的代碼，uglify可以將javascript代碼壓縮，等等。
而[url=http://gruntjs.com]grunt[/url]是一個類似於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
省略。沒裝過的同學請參考[url]http://xpenxpen.iteye.com/blog/2092294[/url]
3.2 將nodejs和npm所在的目錄加入到PATH
3.3 升級npm到最新版
D:\>npm update -g npm3.4 安裝grunt-cli
D:\>npm install -g grunt-cli查看grunt版本
D:\>grunt -V
grunt-cli v0.1.13
4. modernizer項目初探
4.1 是什麼
[url=http://modernizr.com/]modernizer[/url]是一個javascript類庫，用來檢測瀏覽器支持HTML5和CSS3的哪些特性。
4.2 下載
去github克隆下來，地址[url]https://github.com/Modernizr/Modernizr[/url]
接下來的步驟其實都在他的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 [url=https://www.npmjs.com/package/grunt-contrib-clean]clean[/url]
顧名思義，用來清除文件和文件夾的
5.2 jshint
[url]http://jshint.com/[/url]
[url]https://www.npmjs.com/package/grunt-contrib-jshint[/url]
JavaScript代碼質量檢查工具，可以用來找出一些潛在的代碼缺陷。
5.3 jade
[url]https://github.com/jadejs/jade[/url]
[url]https://www.npmjs.com/package/grunt-contrib-jade[/url]
模板引擎，可以減輕你寫html的工作量。它會將自定義的語言轉換爲html
應用
編譯完後可在Modernizr\test目錄下發現3個文件，iframe.html，index.html，unit.html，而他們是由Modernizr\test\browser目錄下的擴展名爲jade的文件生成的。
5.4 istanbul
[url]https://github.com/gotwarlost/istanbul[/url]
[url]https://www.npmjs.com/package/grunt-istanbul[/url]
名字叫伊斯坦布爾（土耳其城市），是一個代碼覆蓋率工具。javascript也能像java一樣做覆蓋率測試，牛！
分以下幾個步驟：
1) instrument
2) 運行測試，mochaTest
3） storeCoverage
4） makeReport
編譯完後可打開Modernizr\test\coverage\reports\lcov-report\index.html欣賞我們的成果，裏面會告訴你哪些代碼沒被覆蓋到。
測試時用到mocha，而mocha又用到前面提到的phantomjs
[url]https://www.npmjs.com/package/grunt-mocha[/url]
[url]https://www.npmjs.com/package/grunt-mocha-test[/url]
[url=https://github.com/ariya/phantomjs]phantomjs[/url]是一個服務器端的 JavaScript API 的 WebKit。（用C++寫的）
使用場景：
無需瀏覽器的 Web 測試
頁面訪問自動化
屏幕捕獲
網絡監控
6.尾聲
通過站在巨人的肩膀上，我們欣賞到了那些一流的javascript項目是怎麼做的。有了grunt，javascript工程也能自動化地構建了。筆者不得不感嘆技術的日新月異啊！同樣的，我們也可以感受到語言之間是相通的，重要的是idea。面向對象，自動構建，自動化測試，代碼覆蓋率，持續集成，這些idea不是java的專利，javascript也能擁有。
7.參考資料
[url=http://www.gregjopa.com/2014/02/testing-and-code-coverage-with-node-js-apps/]Testing and Code Coverage With Node.js Apps[/url] 介紹了javascript的覆蓋率測試，包括istanbul以及如何和sonar集成