前端开发实用小工具

　　目前前端开发在飞速发展，也出现了很多的实用并值得推荐的前端开发小工具。下面源码时代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代码风格检查器
　　了解更多相关web前端信息：http://www.its***