1. node.js + npm， 這個是前端工具的一個平臺，沒有他們就沒有以下的工具，建立開發(fā)環(huán)境，下載開發(fā)工具，運(yùn)行開發(fā)工具的利器

2. bower, 庫依賴管理器，類似于npm，但針對瀏覽器JavaScript的依賴管理，減少尋找?guī)欤螺d庫和升級庫的煩惱流程自動化管理工具，將你非編程的開發(fā)步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發(fā)布和開發(fā)各種無壓力。以下大部分開發(fā)工具，都有g(shù)runt的相對應(yīng)的插件，也就是說他們都能利用grunt進(jìn)行自動化運(yùn)行

3.grunt，流程自動化管理工具，將你非編程的開發(fā)步驟減到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5無盡地獄，發(fā)布和開發(fā)各種無壓力。以下大部分開發(fā)工具，都有g(shù)runt的相對應(yīng)的插件，也就是說他們都能利用grunt進(jìn)行自動化運(yùn)行 本來是一套解決方案，自從grunt watch出現(xiàn)后，我們只要安裝他的chrome或者firefox插件就行了。它的目的很簡單，只要發(fā)現(xiàn)目標(biāo)文件中有任何一個文件有改動，立刻通知瀏覽器刷新頁面，這樣就免除了手動按F5。如果和grunt watch合用，就是只要發(fā)現(xiàn)任何文件有改動，立刻運(yùn)行自動化流程中的所有任務(wù)，然后通知瀏覽器刷新。

4.liveReload, 本來是一套解決方案，自從grunt watch出現(xiàn)后，我們只要安裝他的chrome或者firefox插件就行了。它的目的很簡單，只要發(fā)現(xiàn)目標(biāo)文件中有任何一個文件有改動，立刻通知瀏覽器刷新頁面，這樣就免除了手動按F5。如果和grunt watch合用，就是只要發(fā)現(xiàn)任何文件有改動，立刻運(yùn)行自動化流程中的所有任務(wù)，然后通知瀏覽器刷新。本人用less比較多，因?yàn)榛緹o縫兼容歷史遺留系統(tǒng)中的css，（而Sass語法比較特殊，還沒有專門用過，應(yīng)該開發(fā)新系統(tǒng)的css比較好），一套css預(yù)編譯語言，可以把less語法轉(zhuǎn)成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。

5. 本人用less比較多，因?yàn)榛緹o縫兼容歷史遺留系統(tǒng)中的css，（而Sass語法比較特殊，還沒有專門用過，應(yīng)該開發(fā)新系統(tǒng)的css比較好），一套css預(yù)編譯語言，可以把less語法轉(zhuǎn)成css語法，lessc是less語言編譯器，配合grunt less，編寫大型css文檔毫無壓力。

，沒有界面的瀏覽器，用js腳本控制其操作網(wǎng)頁。測試，抓圖，網(wǎng)頁流程自動化利器。配合casperjs的語法簡化功能真強(qiáng)庫后，控制Phantomjs就更加容易了

6.Phantomjs，沒有界面的瀏覽器，用js腳本控制其操作網(wǎng)頁。測試，抓圖，網(wǎng)頁流程自動化利器。配合casperjs的語法簡化功能真強(qiáng)庫后，控制Phantomjs就更加容易了 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發(fā)css的時候，快速對n多個頁面進(jìn)行觀察，看其前后變化。不過缺點(diǎn)也比較明顯，就是速度慢。但比起手動對比來看，還是非?？斓摹Ｖ档胏ss開發(fā)時擁有

7. grunt PhotoBox, 利用phantomjs抓圖功能和ImageMagick圖片比較功能，在利用live-reload即時刷新功能，可以讓你開發(fā)css的時候，快速對n多個頁面進(jìn)行觀察，看其前后變化。不過缺點(diǎn)也比較明顯，就是速度慢。但比起手動對比來看，還是非?？斓?。值得css開發(fā)時擁有

（?。o圖?。。?/p>

8. phantomCSS，這個和grunt photobox類似，都用于css開發(fā)的，差別是photobox是全局觀察差別，而這個是單元組件觀察差別，它方便你就抓頁面中某一塊元素然后進(jìn)行前后比較，更加注重細(xì)節(jié)上的差異，這個比較合適組件開發(fā)時候使用。

9. jshint，幫助你快速定位JavaScript的語法錯誤和潛在的跨瀏覽器兼容性問題。在部署你JS前，用jshint檢查一下是沒錯的

（??！無圖片?。。?/p>

10.UglifyJS，壓縮JavaScript代碼，使你的JS代碼可以更加快速的加載。有g(shù)runt的插件

browserify允許你在瀏覽器里面使用CMD標(biāo)準(zhǔn)模塊，但本人認(rèn)為它的另外一個優(yōu)勢是合并代碼，開發(fā)時候可以把代碼模塊化，分成很多很多小文件，然后有調(diào)理的放到相對應(yīng)文件夾下，然后最后合成單一文件。本人曾經(jīng)利用browserify開發(fā)greasemonkey代碼，大大簡化了greasemonkey的開發(fā)難度和增強(qiáng)了greasemonkey代碼的質(zhì)量。browserify有g(shù)runt插件，這樣又減少的開發(fā)步驟。

11. browserify允許你在瀏覽器里面使用CMD標(biāo)準(zhǔn)模塊，但本人認(rèn)為它的另外一個優(yōu)勢是合并代碼，開發(fā)時候可以把代碼模塊化，分成很多很多小文件，然后有調(diào)理的放到相對應(yīng)文件夾下，然后最后合成單一文件。本人曾經(jīng)利用browserify開發(fā)greasemonkey代碼，大大簡化了greasemonkey的開發(fā)難度和增強(qiáng)了greasemonkey代碼的質(zhì)量。browserify有g(shù)runt插件，這樣又減少的開發(fā)步驟。開發(fā)的一個單元測試運(yùn)行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由于前端瀏覽器眾多，就算你有l(wèi)ive-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運(yùn)行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然后把單元測試在個個瀏覽器中自動運(yùn)行一遍，讓這個步驟也能自動化了。

12. Karma， google開發(fā)的一個單元測試運(yùn)行器，這個自己本身不是一個單元測試框架，而是配合測試單元框架的一個工具。由于前端瀏覽器眾多，就算你有l(wèi)ive-reload這樣自動化工具，但是還是要手動打開各種瀏覽器，手動把你的單元測試在各個瀏覽器都運(yùn)行一遍。這個工具目的是目的就是讓電腦能自動化打開各種瀏覽器，然后把單元測試在個個瀏覽器中自動運(yùn)行一遍，讓這個步驟也能自動化了。

（！！無圖片?。。?/p>

13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin實(shí)際上背后使用的是clean-css工具，這個工具就是用來壓縮精簡css的，讓css文件大小更小。

還有些有名氣的工具，應(yīng)該不錯，但是自己沒有用過，所以也就沒有提，但可以參考一下

yeoman 項(xiàng)目初始化工具

buddy.js 魔術(shù)數(shù)字檢查器

Image minifier.壓縮圖片工具

html-minifier html壓縮

jade html預(yù)編譯語言

jsdox JS代碼注釋文檔生成器

jscs JS代碼風(fēng)格檢查器