5个前端工具

时间 2019-11-16

标签前端工具繁體版

原文原文链接

在过去的几年时间里，出现了许多全新的网页应用程序，不过，因为应用程序的功能愈来愈丰富，也致使了前端开发的复杂度大幅增长。php

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

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

Chrome dev Tool

这是目前最好的前端开发工具。自从其诞生以来，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

Grunt在任务自动化中颇有用，它是一个基于任务的JavaScript命令行构建工具，支持捆绑任务插件。此外，Grunt是可扩展的，开发人员能够按照本身的须要编写不一样的任务，并且Grunt支持将多任务整合在一块儿，提供更强大的功能。网络

现在，Grunt已经再也不局限于简单的前端自动化工做任务流了，在PHP开发时，就可使用Grunt进行测试工做，以下所示：app

 
        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是一个简单的网页协议，能够触发事件到客户端，不管文件何时被改动，客户端都能及时刷新、处理事件。

通常来讲，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

 
        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

 
        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类进行测试的一个例子：

 
        // 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声明语法。

 
        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，让你对本身的代码充满自信。

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

若是您恰巧也是一名前端开发工程师，那么是否也有本身喜欢的工具呢？欢迎在下面的评论栏里和你们分享。