現在也有不少前端開發工具，比如Backbone和EmberJS框架都能提供穩定的App開發解決方案。同時，Javascript的應用也越來越常廣泛，而且它還能和Node.JS在後端協同工作，快速搭建易於擴充套件的網路應用。實際上，為了應對前端開發複雜度所帶來的挑戰，開發人員建立了許多工具來簡化開發流程。從測試框架，到分析工具，前端開發工具已經非常成熟了，正是得益於這些有用的工具才讓使用者體驗到最佳的網際網路服務。
開發人員都喜歡使用高質量的軟體開發工具，本文就推薦五個優秀的前端開發工具和框架，希望能供開發人員參考。
Chrome dev Tool
這是目前最好的前端開發工具。自從其誕生以來，Chrome在其開發者工具中投入了大量精力，而且直到現在，谷歌仍在不斷優化這些工具。一般而言，谷歌會在每六週釋出對Chrome開發者工具的優化，並推出一些全新功能。
Chrome開發工具是各種工具組成的套件，開發人員可以實時編輯DOM(HTML)/CSS，逐步除錯JavaScript，並幫助開發者更加深入地進行效能分析。Chrome開發工具甚至還可以新增terminal（DevTool Terminal是一款Chrome開發工具的擴充套件，可以幫助開發者在瀏覽器中訪問終端。如果你經常在命令列工作，這款擴充套件將十分適合你），幫助開發人員解決相關渲染效能問題。
DOM/CSS編輯器是一個非常強大的工具，可以為你的開發團隊提供實時反饋，在開發UI/UX新功能的時候可以支援快速迭代。
在官網和谷歌開發者的YouTube頻道上面有許多含金量很高的資訊。其中一個名為“命令列API”的章節就為開發人員提供了大量非常有用的命令。比如，你可以呼叫一個特殊的“複製”功能，就可以從控制檯複製任何東西（比如物件，函式返回）到剪下板上面。另外，在HTML5Rocks上面還有很多優秀的教程。如果你的好奇心很強，並且想了解瀏覽器究竟是如何工作的，那麼能在這些教程裡學到很多東西，幫助你全面掌控應用程式開發週期。
如果谷歌不斷優化Chrome開發工具的話，這套工具最終會成為網頁的整合開發環境（IDE），直接和瀏覽器進行捆綁，為開發人員提供更加強大的開發空間。
Grunt
Grunt在任務自動化中很有用，它是一個基於任務的JavaScript命令列構建工具，支援捆綁任務外掛。此外，Grunt是可擴充套件的，開發人員可以按照自己的需要編寫不同的任務，而且Grunt支援將多工整合在一起，提供更強大的功能。
如今，Grunt已經不再侷限於簡單的前端自動化工作任務流了，在PHP開發時，就可以使用Grunt進行測試工作，如下所示：
terminal =require('color-terminal')
log = (error, stdout, stderr, cb) ->
iferror
terminal.color('red').write stdout
else
terminal.color('green').write stdout
cb()
module.exports = (grunt) ->
grunt.loadNpmTasks'grunt-contrib-watch'
grunt.loadNpmTasks'grunt-shell'
grunt.initConfig
testFilepath: null
watch:
php:
options:
event:'changed'
spawn: false
files: [
'foo/bar/**/*.php'
'foo/bar/**/*Test.php'
]
tasks:'shell:phpunit'
shell:
phpunit:
options:
callback: log
command:'echo <%= testFilepath %> && phpunit -c app <%= testFilepath %>'
grunt.event.on'watch', (action, filepath, ext) ->
regex =newRegExp("foo/bar/([a-z0-9]+)/([a-z0-9/]+)","i")
iffilepath.match regex
iffilepath.indexOf('Test') is -1
testFilepath = filepath.replace regex,"foo/bar/$1/Tests/$2Test"
else
testFilepath = filepath
grunt.config'testFilepath', testFilepathGrunt還可以用來建立工作區，此外開發人員在建立一個新專案的時候，往往需要做一些繁瑣且重複的必要工作，而Grunt提供了不少外掛，可以使這些瑣碎的工作變得簡單。LiveReload
每天你會在鍵盤上點選多少次“重新整理”鍵呢？很多次吧。LiveReload是一個簡單的網頁協議，可以觸發事件到客戶端，無論檔案什麼時候被改動，客戶端都能及時重新整理、處理事件。
一般來說，LiveReload可以和Grunt捆綁在一起使用，搭建本地前端開發環境。而在客戶端，LiveReload則會提供一個簡單的Chrome擴充套件程式。談到Chrome擴充套件程式，Chromestore絕對是一個好地方，你可以到上面逛一逛，就會發現裡面有不少好東西，這裡推薦幾個，拋磚引玉：
1、WhatFont，它是一個書籤欄工具，採用滑鼠懸浮功能特性，點選後就可以告訴使用者在網站上所指的字型屬性、字型名稱、大小、顏色等等，非常方便。此外，它還可以幫助開發人員除錯字型風格。
2、 Page ruler，它可以幫助開發人員測量網站中任何元素的尺寸，畫素的寬度和高度。
3、 Proxy SwithcySharp，它可以用來幫助開發人員除錯本地化資訊，包括預設貨幣、電話號碼等
4、 當然，最受歡迎的當屬Chrome app。
Mocha/Chai/Sinon
反覆測試有沒有讓你覺得想吐？通常情況下，如果在前端開發的初始階段沒有設計好測試，那麼後面的工作往往會變得非常困難。幸運的是，我們有不少優秀的測試框架，它們就像之前使用過的那些開發語言一樣強大。目前主流的兩個測試框架就是Jasmine和Mocha。
按照筆者已往的經驗，更願意推薦Mocha。它是一個功能豐富的Javascript測試框架，支援非同步測試，這在Javascript中經常要用到。下面是兩個測試案例，第一個是用Jasmine寫的，第二個使用Mocha/Chai寫的，如下所示：
Jasmine
AsyncProcess =require('./async-process').AsyncProcess
describe('AsyncProcess',function() {
varasyncProcess;
beforeEach(function() {
asyncProcess =newAsyncProcess();
});
it('should process 42',function() {
vardone = false;
varprocessed = null;
deferred = asyncProcess.process();
deferred.then(function(result) {
done = true;
processed = result;
});
waitsFor(function() {
returndone;
},"the async process to complete", 10000);
runs(function() {
expect(processed).toEqual(42);
});
});
});Mocha/ChaiAsyncProcess =require('./async-process').AsyncProcess;
Chai =require('chai');
Chai.should();
describe('AsyncProcess',function() {
varasyncProcess;
beforeEach(function() {
asyncProcess =newAsyncProcess();
});
it('should process 42',function(done) {
deferred = asyncProcess.process();
deferred.then(function(processed) {
processed.should.be.equal(42);
done();
});
});
});Jasmine所選的為預設語法，只有通過外掛才能有Mocha一樣的功能，而後者簡潔的多。和Jasmine不同，Mocha僅提供行為測試結構，這種測試框架通常對應的是行為驅動開發，也就是BDD。但是這點並不會對Mocha產生負面影響，它可以與Chai和Sinon這樣的輔助測試工具結合使用。
下面，就是呼叫Sinon測試工具集內的spy類進行測試的一個例子：
// Function under test
functiononce(fn) {
varreturnValue, called = false;
returnfunction() {
if(!called) {
called = true;
returnValue = fn.apply(this, arguments);
}
returnreturnValue;
};
}
it("calls the original function",function() {
varspy = sinon.spy();
varproxy = once(spy);
proxy();
assert(spy.called);
});Chai的特點在於，開發人員可以使用和自然語言相近的宣告語法。不妨可以參考下面的例子，呼叫Chai中的should宣告語法。foo.should.be.a('string');
foo.should.equal('bar');
foo.should.have.length(3);
tea.should.have.property('flavors').with.length(3);很清晰，對嗎？現在就趕緊在你自己的程式碼上測試一下吧！Karma
雖然筆者把Karma放在了最後一個，但它仍然是一款非常重要的前端測試工具。Karma的前身是Testacular，一個Javascript測試工具。Karma開發者和開發AngularJS的是同一批人。如果你使用Mocha、Chai以及Sinon，那麼連續不斷的執行上述這些測試框架，會提供實時的反饋嗎？
Karma允許開發人員從工作站（在持續執行模式下）到生產呼叫指示，都能進行測試。它還支援多種瀏覽器，包括Chrome、Firefox、IE、PhantomJS，讓你對自己的程式碼充滿自信。
在進行開發工作時，第一快樂的就是在自己的電腦上寫程式碼，並實時得到結果反饋；第二快樂的，就是自己的程式能夠應用在各種瀏覽器上面，想必上述這兩點能夠得到絕大多數開發人員的共鳴吧。現在，你是否已經做好了準備，化身成為一個“前端忍者”，去挑戰一切困難了呢？當然，這裡沒有提到一些文字程式碼編輯器，比如SublimeText和Vim，但是它們都是很好的開發工具。另外，本文使用的例子都來自GitHubGist。
如果您恰巧也是一名前端開發工程師，那麼是否也有自己喜歡的工具呢？歡迎在下面的評論欄裡和大家分享。
相關閱讀
評論(1)