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

标签:移动互联工具前端

访客:19460  发表于:2015-10-13 11:33:52

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

切图类插件

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 的童鞋都懂。

最后

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

来源:互联网

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

评论(0)

您可以在评论框内@您的好友一起参与讨论!

<--script type="text/javascript">BAIDU_CLB_fillSlot("927898");