一位多年老前端的工具集合

切图类插件

• cutterman

• assistor-ps

作为页面仔，自己的ps没有一个好的插件怎么能行呢。

预处理器和后处理器

处理器

• Less

• Sass

• Stylue

• autoprefixer

编译工具

• gulp-autoprefixer

• gulp-less

• gulp-sass

• gulp-stylus

• gulp-sourcemaps 用来在浏览器中调试自己写的lesssassstylus，能够准确在开发中工具定位。

• koala 不想使用gulpgrunt等自动化工具来编译的话，可以使用这个，全平台支持。

编译工具中我常用到的gulp，所以都是依赖gulp插件的。如果你是使用别的自动化工具的话，可以去npm package官网上寻找你要的插件。

CSS 在线生成工具

• CSS小工具集合

• CSS3 Maker

• Border Radius

• CSS3 Generator

• CSS3 Tool

• CSS3 Keyframes Animation Generator

• Ceaser - CSS Easing Animation Tool - Matthew Lein

• Stylie

在线的css3工具，作为学习和编写css特效项目有很大的帮助。尤其是css3动画的制作。

自动化工具

• npm

• bower

• gulp

• grunt

• fis3

• webpack -> 翻译文档

自动化工具用来安装依赖和构建项目，能够很方便的处理那些繁琐的事情如：压缩、打包、编译等。

调试工具

• Browsersync

• 微信调试工具

• BrowserStack Local 一款要收费的chrome插件，提供许多许多版本的浏览器可以测试（远程开虚拟机，然后我们在浏览器里面可以看到）。还支持一些安卓和ios模拟器的查看（也有免费的可以用，不过可用的浏览器就很少了）。

• WEB前端助手（FeHelper） 也是一款chrome的插件，功能的话可以点开链接看看。

调试工具可以解放我们的f5键和能够更加方便的在手机上调试。大大提高生产力！

Sublime 插件

• 我的 Sublime Text 必备插件 列出了一些常用的插件以及安装和使用的方法，适合***次使用的童鞋。

• Sublime collection

建议大家把自己的package都上传到github或者coding之类的代码托管平台，以后换电脑的时候就再也不用重新的去安装那些插件了。

其他

• Landscaping With Frontend Development Tools

• Frontend Tools

• 醉牛前端

• 正则表达式工具

• caniuse-cmd 知道 caniuse 的童鞋都懂。

***

作为一个页面仔，很需要有工具去辅助自己开发。例如：处理器、自动化工具、调试工具等。随着自己的负责的项目越来越大，更需要这些工具去处理那些繁琐的事情，让我们能够更加专注的去写代码。