yjxf8285@qq.com

流行的前端工具推荐

爱前端 Plugins/Tools 流行的前端工具推荐
2f46b94548e8f81716ee5d4f455342de

Plugins/Tools

流行的前端工具推荐

Posted By 刘晓帆 | 752 views

转载请注明来自:爱前端

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,但是grunt cssmin实际上背后使用的是clean-css工具,这个工具就是用来压缩精简css的,让css文件大小更小。

还有些有名气的工具,应该不错,但是自己没有用过,所以也就没有提,但可以参考一下

  • yeoman 项目初始化工具
  • buddy.js 魔术数字检查器
  • Image minifier.压缩图片工具
  • html-minifier html压缩
  • jade html预编译语言
  • jsdox JS代码注释文档生成器
  • jscs JS代码风格检查器

Comments are closed.