五个值得尝试的前端开发工具

2014-6-9 10:58| 发布者: joejoe0332| 查看: 3769| 评论: 0|原作者: 雷锋网|来自: 雷锋网

摘要: 在过去的几年时间里，出现了许多全新的网页应用程序，不过，由于应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加。开发人员都喜欢使用高质量的软件开发工具，本文就推荐五个优秀的前端开发工具和框架， ...

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

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

keyboard-typing-798x310

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

Chrome dev Tool

Chrome-730x280

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

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

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

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

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

Grunt

logo1

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

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

01terminal = require('color-terminal')
02 
03log = (error, stdout, stderr, cb) ->
04    if error
05        terminal.color('red').write stdout
06    else
07        terminal.color('green').write stdout
08 
09    cb()
10 
11module.exports = (grunt) ->
12    grunt.loadNpmTasks 'grunt-contrib-watch'
13    grunt.loadNpmTasks 'grunt-shell'
14 
15    grunt.initConfig
16        testFilepath: null
17 
18        watch:
19            php:
20                options:
21                    event: 'changed'
22                    spawn: false
23                files: [
24                    'foo/bar/**/*.php'
25                    'foo/bar/**/*Test.php'
26                ]
27                tasks: 'shell:phpunit'
28 
29        shell:
30            phpunit:
31                options:
32                    callback: log
33                command: 'echo <%= testFilepath %> && phpunit -c app <%= testFilepath %>'
34 
35    grunt.event.on 'watch', (action, filepath, ext) ->
36        regex = new RegExp("foo/bar/([a-z0-9]+)/([a-z0-9/]+)", "i")
37 
38        if filepath.match regex
39            if filepath.indexOf('Test') is -1
40                testFilepath = filepath.replace regex, "foo/bar/$1/Tests/$2Test"
41            else
42                testFilepath = filepath
43 
44            grunt.config 'testFilepath', testFilepath