5個前端工具

keyboard-typing-798x310

在過去的幾年時間裏,出現了許多全新的網頁應用程序,不過,因爲應用程序的功能愈來愈豐富,也致使了前端開發的複雜度大幅增長。php

如今也有很多前端開發工具,好比Backbone和EmberJS框架都能提供穩定的App開發解決方案。同時,Javascript的應用也越來 越常普遍,並且它還能和Node.JS在後端協同工做,快速搭建易於擴展的網絡應用。實際上,爲了應對前端開發複雜度所帶來的挑戰,開發人員建立了許多工 具來簡化開發流程。從測試框架,到分析工具,前端開發工具已經很是成熟了,正是得益於這些有用的工具才讓用戶體驗到最佳的互聯網服務。html

開發人員都喜歡使用高質量的軟件開發工具,本文就推薦五個優秀的前端開發工具和框架,但願能供開發人員參考。前端

Chrome dev Tool

Chrome-730x280

這是目前最好的前端開發工具。自從其誕生以來,Chrome在其開發者工具中投入了大量精力,並且直到如今,谷歌仍在不斷優化這些工具。通常而言,谷歌會在每六週發佈對Chrome開發者工具的優化,並推出一些全新功能。git

Chrome開發工具是各類工具組成的套件,開發人員能夠實時編輯DOM  (HTML)/CSS,逐步調試JavaScript,並幫助開發者更加深刻地進行性能分析。Chrome開發工具甚至還能夠新增 terminal(DevTool Terminal是一款Chrome開發工具的擴展,能夠幫助開發者在瀏覽器中訪問終端。若是你常常在命令行工做,這 款擴展將十分適合你),幫助開發人員解決相關渲染性能問題。github

DOM/CSS編輯器是一個很是強大的工具,能夠爲你的開發團隊提供實時反饋,在開發UI/UX新功能的時候能夠支持快速迭代。shell

在官網和谷歌開發者的YouTube頻道上面有許多含金量很高的信息。其中一個名爲「命令行API」的章節就爲開發人員提供了大量很是有用的命令。好比,你能夠調用一個特殊的「複製」功能,就能夠從控制檯複製任何東西(好比對象,函數返回)到剪切板上面。另外,在HTML5 Rocks上面還有不少優秀的教程。若是你的好奇心很強,而且想了解瀏覽器到底是如何工做的,那麼能在這些教程裏學到不少東西,幫助你全面掌控應用程序開發週期。後端

若是谷歌不斷優化Chrome開發工具的話,這套工具最終會成爲網頁的集成開發環境(IDE),直接和瀏覽器進行捆綁,爲開發人員提供更增強大的開發空間。瀏覽器

Grunt

logo1

Grunt在任務自動化中頗有用,它是一個基於任務的JavaScript命令行構建工具,支持捆綁任務插件。此外,Grunt是可擴展的,開發人員能夠按照本身的須要編寫不一樣的任務,並且Grunt支持將多任務整合在一塊兒,提供更強大的功能。網絡

現在,Grunt已經再也不侷限於簡單的前端自動化工做任務流了,在PHP開發時,就可使用Grunt進行測試工做,以下所示:app

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
terminal =  require ( 'color-terminal' )
 
log = (error, stdout, stderr, cb) ->
     if  error
         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 =  new  RegExp( "foo/bar/([a-z0-9]+)/([a-z0-9/]+)" "i" )
 
         if  filepath.match regex
             if  filepath.indexOf( 'Test' ) is -1
                 testFilepath = filepath.replace regex,  "foo/bar/$1/Tests/$2Test"
             else
                 testFilepath = filepath
 
             grunt.config  'testFilepath' , testFilepath

Grunt還能夠用來建立工做區,此外開發人員在建立一個新項目的時候,每每須要作一些繁瑣且重複的必要工做,而Grunt提供了很多插件,可使這些瑣碎的工做變得簡單。

LiveReload

LiveReload_350

天天你會在鍵盤上點擊多少次「刷新」鍵呢?不少次吧。LiveReload是一個簡單的網頁協議,能夠觸發事件到客戶端,不管文件何時被改動,客戶端都能及時刷新、處理事件。

通常來講,LiveReload能夠和Grunt捆綁在一塊兒使用,搭建本地前端開發環境。而在客戶端,LiveReload則會提供一個簡單的 Chrome擴展程序。談到Chrome擴展程序,Chrome  store絕對是一個好地方,你能夠到上面逛一逛,就會發現裏面有很多好東西,這裏推薦幾個,拋磚引玉:

一、  WhatFont,它是一個書籤欄工具,採用鼠標懸浮功能特性,點擊後就能夠告訴用戶在網站上所指的字體屬性、字體名稱、大小、顏色等等,很是方便。此外,它還能夠幫助開發人員調試字體風格。

二、  Page ruler,它能夠幫助開發人員測量網站中任何元素的尺寸,像素的寬度和高度。

三、  Proxy SwithcySharp,它能夠用來幫助開發人員調試本地化信息,包括默認貨幣、電話號碼等

四、  固然,最受歡迎的當屬Chrome app。

Mocha/Chai/Sinon

反覆測試有沒有讓你以爲想吐?一般狀況下,若是在前端開發的初始階段沒有設計好測試,那麼後面的工做每每會變得很是困難。幸運的是,咱們有很多優秀的測試框架,它們就像以前使用過的那些開發語言同樣強大。目前主流的兩個測試框架就是Jasmine和Mocha。

按照筆者已往的經驗,更願意推薦Mocha。它是一個功能豐富的Javascript測試框架,支持異步測試,這在Javascript中常常要用到。下面是兩個測試案例,第一個是用Jasmine寫的,第二個使用Mocha/Chai寫的,以下所示:

Jasmine

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
AsyncProcess = require( './async-process' ).AsyncProcess
 
describe( 'AsyncProcess' function () {
     var  asyncProcess;
 
     beforeEach( function () {
         asyncProcess =  new  AsyncProcess();
     });
 
     it( 'should process 42' function () {
         var  done =  false ;
         var  processed =  null ;
 
         deferred = asyncProcess.process();
         deferred.then( function (result) {
             done =  true ;
             processed = result;
         });
 
         waitsFor( function () {
             return  done;
         },  "the async process to complete" , 10000);
 
         runs( function () {
             expect(processed).toEqual(42);
         });
     });
});

Mocha/Chai

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
AsyncProcess = require( './async-process' ).AsyncProcess;
Chai = require( 'chai' );
 
Chai.should();
 
describe( 'AsyncProcess' function () {
     var  asyncProcess;
 
     beforeEach( function () {
         asyncProcess =  new  AsyncProcess();
     });
 
     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類進行測試的一個例子:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Function under test
function  once(fn) {
     var  returnValue, called =  false ;
     return  function  () {
         if  (!called) {
             called =  true ;
             returnValue = fn.apply( this , arguments);
         }
         return  returnValue;
     };
}
 
it( "calls the original function" function  () {
     var  spy = sinon.spy();
     var  proxy = once(spy);
 
     proxy();
 
     assert(spy.called);
});

Chai的特色在於,開發人員可使用和天然語言相近的聲明語法。不妨能夠參考下面的例子,調用Chai中的should聲明語法。

?
1
2
3
4
foo.should.be.a( 'string' );
foo.should.equal( 'bar' );
foo.should.have.length(3);
tea.should.have.property( 'flavors' ). with .length(3);

很清晰,對嗎?如今就趕忙在你本身的代碼上測試一下吧!

Karma

karma-e1401377345828-730x176

雖然筆者把Karma放在了最後一個,但它仍然是一款很是重要的前端測試工具。Karma的前身是Testacular,一個Javascript 測試工具。Karma開發者和開發AngularJS的是同一批人。若是你使用Mocha、Chai以及Sinon,那麼接二連三的運行上述這些測試框 架,會提供實時的反饋嗎?

Karma容許開發人員從工做站(在持續運行模式下)到生產調用指示,都能進行測試。它還支持多種瀏覽器,包括Chrome、Firefox、IE、PhantomJS,讓你對本身的代碼充滿自信。

在進行開發工做時,第一快樂的就是在本身的電腦上寫代碼,並實時獲得結果反饋;第二快樂的,就是本身的程序可以應用在各類瀏覽器上面,想必上述這兩 點可以獲得絕大多數開發人員的共鳴吧。如今,你是否已經作好了準備,化身成爲一個「前端忍者」,去挑戰一切困難了呢?固然,這裏沒有提到一些文本代碼編輯 器,好比Sublime Text和Vim,可是它們都是很好的開發工具。另外,本文使用的例子都來自GitHub Gist

若是您恰巧也是一名前端開發工程師,那麼是否也有本身喜歡的工具呢?歡迎在下面的評論欄裏和你們分享。

相關文章
相關標籤/搜索