我們在學會如何使用JsLint以及CsLint檢查程式碼之後，
更進一步的是希望在我們每日建置時也能夠產生JsLint和CssLint的報表，
幫助我們了解目前專案中的程式碼是否還有潛在的問題，
在本篇文章中將向大家介紹，如何在整合JsLint及CssLint並顯示分析報表
※設定使用JsLint
由於JsLint是由JavaScript所撰寫而成，所以沒辦法直接在Command Line使用它來掃描我們的程式碼，
因此我們需要透過一些Wrapper的幫助，將JsLint透過Java或nodeJs來執行。
JsLint使用Java所開發的Wrapper為jslint4java，我們將使用它來進行程式碼分析

1. 下載jslint4java，並放至C:\Program Files (x86)\Jslint\jslint4java-2.0.2.jar
   jslint4java - http://code.google.com/p/jslint4java/
2. 打開Jenkins專案首頁，進入設定畫面
   
3. 找到Build區段，新增執行window batch command
   
4. 輸入CommandLine指令執行JsLint

@echo off
set jsFolder="%WORKSPACE%\CI-Sample.WebSite\Scripts\App\*.js"
set jslintPath="C:\Program Files (x86)\Jslint\jslint4java-2.0.2.jar"

mkdir .\JsLintReport
for %%x in (%jsFolder%) do java -jar %jslintPath% "%%x" --report xml > .\JsLintReport\%%~nx.xml

exit 0

5. 找到Report Violations區段，在JsLint輸入JsLintReport\*.xml

6. 回到專案並建置，可以看到出現JsLint報表

7. 點擊報表可以看到更多詳細的資料

※設定使用CssLint
接下來我們開始整合CssLint，由於CssLint是由node來執行，
所以我們一樣的透過batch指令來進行我們的掃描操作

1. 安裝請參考前一篇文章
2. 打開Jenkins專案首頁，進入設定畫面
   
3. 找到Build區段，新增執行window batch command
   
4. 輸入CommandLine指令執行CssLint

@echo off
set cssFolder="%WORKSPACE%\CI-Sample.WebSite\Content\themes\base\*.css"
set csslintPath="C:\Users\kirkchen\AppData\Roaming\npm\csslint.cmd"

mkdir .\CssLintReport
for %%x in (%cssFolder%) do %csslintPath% "%%x" --format=lint-xml > .\CssLintReport\%%~nx.xml

exit 0

5. 找到Report Violations區段，在CssLint輸入CssLintReport\*.xml

6. 回到專案並建置，可以看到出現CssLint報表

※JsLint和CssLint用MsBuild撰寫請參考https://github.com/kirkchen/CI-Sample/blob/master/BuildScript/Build.csproj
※總結
再加入JsLint和CssLint之後，不管是網站的前端或後端，
我們都可以利用Jenkins來進行品質管控，並且產生詳細的報表供開發人員參考，
透過提升版本控制系統程式碼，無形中也讓我們的專案更加的穩定且易於維護，
讓整個軟體開發流程進入一個正向的循環！
關於今天的內容，若有任何問題歡迎提出來一起討論 ^_^