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

切圖類插件

cutterman

assistor-ps

作為頁面仔，自己的ps沒有一個好的插件怎么能行呢。

預處理器和后處理器

處理器

Less

Sass

Stylue

autoprefixer

編譯工具

gulp-autoprefixer

gulp-less

gulp-sass

gulp-stylus

gulp-sourcemaps 用來在瀏覽器中調試自己寫的less\sass\stylus，能夠準確在開發中工具定位。

koala 不想使用gulp\grunt等自動化工具來編譯的話，可以使用這個，全平臺支持。

編譯工具中我常用到的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 的童鞋都懂。

***

作為一個頁面仔，很需要有工具去輔助自己開發。例如：處理器、自動化工具、調試工具等。隨著自己的負責的項目越來越大，更需要這些工具去處理那些繁瑣的事情，讓我們能夠更加專注的去寫代碼。

　　聲明：本文僅為傳遞更多網絡信息，不代表IT資訊網觀點和意見，僅供參考了解，更不能作為投資使用依據。