5个前端工具_php

在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。

现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javascript的应用也越来 越常广泛,而且它还能和Node.JS在后端协同工作,快速搭建易于扩展的网络应用。实际上,为了应对前端开发复杂度所带来的挑战,开发人员创建了许多工 具来简化开发流程。从测试框架,到分析工具,前端开发工具已经非常成熟了,正是得益于这些有用的工具才让用户体验到最佳的互联网服务。

开发人员都喜欢使用高质量的软件开发工具,本文就推荐五个优秀的前端开发工具和框架,希望能供开发人员参考。

Chrome dev Tool

5个前端工具_前端开发_02

这是目前最好的前端开发工具。自从其诞生以来,Chrome在其开发者工具中投入了大量精力,而且直到现在,谷歌仍在不断优化这些工具。一般而言,谷歌会在每六周发布对Chrome开发者工具的优化,并推出一些全新功能。

Chrome开发工具是各种工具组成的套件,开发人员可以实时编辑DOM  (HTML)/CSS,逐步调试JavaScript,并帮助开发者更加深入地进行性能分析。Chrome开发工具甚至还可以新增 terminal(DevTool Terminal是一款Chrome开发工具的扩展,可以帮助开发者在浏览器中访问终端。如果你经常在命令行工作,这 款扩展将十分适合你),帮助开发人员解决相关渲染性能问题。

DOM/CSS编辑器是一个非常强大的工具,可以为你的开发团队提供实时反馈,在开发UI/UX新功能的时候可以支持快速迭代。

在官网和谷歌开发者的YouTube频道上面有许多含金量很高的信息。其中一个名为“命令行API”的章节就为开发人员提供了大量非常有用的命令。比如,你可以调用一个特殊的“复制”功能,就可以从控制台复制任何东西(比如对象,函数返回)到剪切板上面。另外,在HTML5 Rocks上面还有很多优秀的教程。如果你的好奇心很强,并且想了解浏览器究竟是如何工作的,那么能在这些教程里学到很多东西,帮助你全面掌控应用程序开发周期。

如果谷歌不断优化Chrome开发工具的话,这套工具最终会成为网页的集成开发环境(IDE),直接和浏览器进行捆绑,为开发人员提供更加强大的开发空间。

Grunt

5个前端工具_php_03

Grunt在任务自动化中很有用,它是一个基于任务的JavaScript命令行构建工具,支持捆绑任务插件。此外,Grunt是可扩展的,开发人员可以按照自己的需要编写不同的任务,而且Grunt支持将多任务整合在一起,提供更强大的功能。

如今,Grunt已经不再局限于简单的前端自动化工作任务流了,在PHP开发时,就可以使用Grunt进行测试工作,如下所示:

​​



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

5个前端工具_javascript_04

每天你会在键盘上点击多少次“刷新”键呢?很多次吧。LiveReload是一个简单的网页协议,可以触发事件到客户端,无论文件什么时候被改动,客户端都能及时刷新、处理事件。

一般来说,LiveReload可以和Grunt捆绑在一起使用,搭建本地前端开发环境。而在客户端,LiveReload则会提供一个简单的 Chrome扩展程序。谈到Chrome扩展程序,Chrome  store绝对是一个好地方,你可以到上面逛一逛,就会发现里面有不少好东西,这里推荐几个,抛砖引玉:

1、  WhatFont,它是一个书签栏工具,采用鼠标悬浮功能特性,点击后就可以告诉用户在网站上所指的字体属性、字体名称、大小、颜色等等,非常方便。此外,它还可以帮助开发人员调试字体风格。

2、  Page ruler,它可以帮助开发人员测量网站中任何元素的尺寸,像素的宽度和高度。

3、  Proxy SwithcySharp,它可以用来帮助开发人员调试本地化信息,包括默认货币、电话号码等

4、  当然,最受欢迎的当属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

5个前端工具_javascript_05

虽然笔者把Karma放在了最后一个,但它仍然是一款非常重要的前端测试工具。Karma的前身是Testacular,一个Javascript 测试工具。Karma开发者和开发AngularJS的是同一批人。如果你使用Mocha、Chai以及Sinon,那么连续不断的运行上述这些测试框 架,会提供实时的反馈吗?

Karma允许开发人员从工作站(在持续运行模式下)到生产调用指示,都能进行测试。它还支持多种浏览器,包括Chrome、Firefox、IE、PhantomJS,让你对自己的代码充满自信。

在进行开发工作时,第一快乐的就是在自己的电脑上写代码,并实时得到结果反馈;第二快乐的,就是自己的程序能够应用在各种浏览器上面,想必上述这两 点能够得到绝大多数开发人员的共鸣吧。现在,你是否已经做好了准备,化身成为一个“前端忍者”,去挑战一切困难了呢?当然,这里没有提到一些文本代码编辑 器,比如​​Sublime Text和Vim​​,但是它们都是很好的开发工具。另外,本文使用的例子都来自​​GitHub Gist​​。

如果您恰巧也是一名前端开发工程师,那么是否也有自己喜欢的工具呢?欢迎在下面的评论栏里和大家分享。