您现在的位置：首页＞技术文章

前端开发工程师们，你们的福利来啦！ --中享思途

在互联网+的浪潮下，HTML5+web前端开发这一行业也在光速发展，届时，也出现了很多值得推荐给大家使用的小工具。好了，废话不多说，小编这就呈上精心挑选的一些在HTML5+web前端开发中实用且好用的一些小工具！
1. node.js + npm，这个是前端工具的一个平台，没有他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器。
2. bower, 库依赖管理器，类似于npm，但针对浏览器JavaScript的依赖管理，减少寻找库，下载库和升级库的烦恼。
3. grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行。
4. liveReload, 本来是一套解决方案，自从grunt watch出现后，我们只要安装他的chrome或者firefox插件就行了。它的目的很简单，只要发现目标文件中有任何一个文件有改动，立刻通知浏览器刷新页面，这样就免除了手动按F5。如果和grunt watch合用，就是只要发现任何文件有改动，立刻运行自动化流程中的所有任务，然后通知浏览器刷新。
5. 用less基本无缝兼容历史遗留系统中的css，(而Sass语法比较特殊，还没有专门用过，应该开发新系统的css比较好)，一套css预编译语言，可以把less语法转成css语法，lessc是less语言编译器，配合grunt less，编写大型css文档毫无压力。
6. Phantomjs，没有界面的浏览器，用js脚本控制其操作网页。测试，抓图，网页流程自动化利器。配合casperjs的语法简化功能真强库后，控制Phantomjs就更加容易了。
7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能，在利用live-reload即时刷新功能，可以让你开发css的时候，快速对n多个页面进行观察，看其前后变化。不过缺点也比较明显，就是速度慢。但比起手动对比来看，还是非常快的。值得css开发时拥有。
8. phantomCSS，这个和grunt photobox类似，都用于css开发的，差别是photobox是全局观察差别，而这个是单元组件观察差别，它方便你就抓页面中某一块元素然后进行前后比较，更加注重细节上的差异，这个比较合适组件开发时候使用。
9. jshint，帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。在部署你JS前，用jshint检查一下是没错的。
10. UglifyJS，压缩JavaScript代码，使你的JS代码可以更加快速的加载。有grunt的插件。
11. browserify允许你在浏览器里面使用CMD标准模块，另外一个优势是合并代码，开发时候可以把代码模块化，分成很多很多小文件，然后有调理的放到相对应文件夹下，然后最后合成单一文件。利用browserify开发greasemonkey代码，大大简化了greasemonkey的开发难度和增强了greasemonkey代码的质量。browserify有grunt插件，这样又减少的开发步骤。
12. Karma， google开发的一个单元测试运行器，这个自己本身不是一个单元测试框架，而是配合测试单元框架的一个工具。由于前端浏览器众多，就算你有live-reload这样自动化工具，但是还是要手动打开各种浏览器，手动把你的单元测试在各个浏览器都运行一遍。这个工具目的是目的就是让电脑能自动化打开各种浏览器，然后把单元测试在个个浏览器中自动运行一遍，让这个步骤也能自动化了。
13. clean-css (grunt cssmin)， grunt cssmin实际上背后使用的是clean-css工具，这个工具就是用来压缩精简css的，让css文件大小更小。
除了以上说的这些工具外，还有些有名气的工具，应该不错，可以参考一下:
yeoman 项目初始化工具
buddy.js 魔术数字检查器
Image minifier.压缩图片工具
html-minifier html压缩
jade html预编译语言
jsdox JS代码注释文档生成器
jscs JS代码风格检查器
这些小工具，尽情拿走，不谢！当然，如果有想要深入了解与学习HTML5+web前端开发这一行业的小伙子和小姑娘们，可以来思途，我们一起规划未来哦！