[[151822]]

切圖類插件

• cutterman

• assistor-ps

作為頁(yè)面仔，自己的ps沒(méi)有一個(gè)好的插件怎么能行呢。

預(yù)處理器和后處理器

處理器

• Less

• Sass

• Stylue

• autoprefixer

編譯工具

• gulp-autoprefixer

• gulp-less

• gulp-sass

• gulp-stylus

• gulp-sourcemaps 用來(lái)在瀏覽器中調(diào)試自己寫的less\sass\stylus，能夠準(zhǔn)確在開發(fā)中工具定位。

• koala 不想使用gulp\grunt等自動(dòng)化工具來(lái)編譯的話，可以使用這個(gè)，全平臺(tái)支持。

編譯工具中我常用到的gulp，所以都是依賴gulp插件的。如果你是使用別的自動(dòng)化工具的話，可以去npm package官網(wǎng)上尋找你要的插件。

CSS 在線生成工具

• CSS小工具集合

• CSS3 Maker

• Border Radius

• CSS3 Generator

• CSS3 Tool

• CSS3 Keyframes Animation Generator

• Ceaser - CSS Easing Animation Tool - Matthew Lein

• Stylie

在線的css3工具，作為學(xué)習(xí)和編寫css特效項(xiàng)目有很大的幫助。尤其是css3動(dòng)畫的制作。

自動(dòng)化工具

• npm

• bower

• gulp

• grunt

• fis3

• webpack -> 翻譯文檔

自動(dòng)化工具用來(lái)安裝依賴和構(gòu)建項(xiàng)目，能夠很方便的處理那些繁瑣的事情如：壓縮、打包、編譯等。

調(diào)試工具

• Browsersync

• 微信調(diào)試工具

• BrowserStack Local 一款要收費(fèi)的chrome插件，提供許多許多版本的瀏覽器可以測(cè)試（遠(yuǎn)程開虛擬機(jī)，然后我們?cè)跒g覽器里面可以看到）。還支持一些安卓和ios模擬器的查看（也有免費(fèi)的可以用，不過(guò)可用的瀏覽器就很少了）。

• WEB前端助手（FeHelper） 也是一款chrome的插件，功能的話可以點(diǎn)開鏈接看看。

調(diào)試工具可以解放我們的f5鍵和能夠更加方便的在手機(jī)上調(diào)試。大大提高生產(chǎn)力！

Sublime 插件

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

• Sublime collection

建議大家把自己的package都上傳到github或者coding之類的代碼托管平臺(tái)，以后換電腦的時(shí)候就再也不用重新的去安裝那些插件了。

其他

• Landscaping With Frontend Development Tools

• Frontend Tools

• 醉牛前端

• 正則表達(dá)式工具

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

***

作為一個(gè)頁(yè)面仔，很需要有工具去輔助自己開發(fā)。例如：處理器、自動(dòng)化工具、調(diào)試工具等。隨著自己的負(fù)責(zé)的項(xiàng)目越來(lái)越大，更需要這些工具去處理那些繁瑣的事情，讓我們能夠更加專注的去寫代碼。