大前端的瑞士軍刀

jopen 9年前發布 | 71K 次閱讀前端前端技術

原文 https://github.com/nieweidong/fetool

大前端工具集

大前端的瑞士軍刀

本篇文章記錄了一枚程序猿的百寶箱。

主要內容是一些使用過的庫、工具、套路或關注的前端組織等等，反正用 前端瑞士軍刀 來總結這篇文章再合適不過鳥。

您可以通過以下方式聯系到我：

微博@聶微東
個人Blog fefork.com
博客園犀利的東哥
QQ群 214199415 ，群名前端Club。PS:入群 務必請提供git或blog地址 ，否則進不去哈:)

前端組織
前端博客
博客搭建
CSS
瀏覽端JS
NodeJS
- 推薦Package
- Node學習資料
Build 項目構建
- Gulp推薦包
精選閱讀
前端面試
工具/軟件
- Web
- APP
  - Android
  - iPhone
- Mac
- Linux
Chrome瀏覽器插件
Git
Redis
MongoDB
雜七雜八
前端炫技- 炫酷狂拽叼炸天的Web

正文

前端組織

雖混過外企倆家，但勞資英文這項的技能點還是灰色的...so，俺關注的站點主要以中文為主

名稱	推薦指數	備注/說明
Git	★★★★★	勞資清楚這不是個純粹的前端社區... 但作為全球最大的搞基社區，無數前端項目在這啟航
MDN	★★★★★	不解釋，無數的資源再等著你探索
Awesomes.cn	★★★★☆	國人維護的前端資源庫，深度對接到 Github
慕課	★★★★☆	大量的在線計算機課程。雖然初、中級居多，但是不乏有巨作值得細細品嘗
W3Cplus	★★★★☆	大漠(《圖解CSS3》作者)在國內的影響力杠杠的 Sass專家級
百度Web前端研發部	★★★★	確實對得起“研發”這個稱呼
前端亂燉	★★★☆	前端社區太多，亂燉還算做的不錯的
極客學院	★★★	和慕課類似，但是內容更雜、更豐富
Div.IO	★★★	主要內容是最新的前端庫和前沿技術
騰訊全端AlloyTeam	★★★	騰訊Web前端團隊

前端博客

值得長期占坑的前端個人博客，都是偶經常關注的

名稱	推薦指數	備注/說明
如何跟上前端開發的最新前沿	★★★★★	RT
阮一峰	★★★★★	關注多年，拜讀其ES6系列... 雖網傳靠寫書進鳥阿里，但博客內容確實夠豐富
粉絲日志for張丹	★★★★★	大愛作者寫的Node系列
張鑫旭	★★★★★	成名多年的、高產的前端大濕

博客搭建

名稱	推薦指數	備注/說明
hexo	★★★★★	快速、簡潔且高效的博客框架
jekyll	★★★★	將純文本轉化為靜態網站和博客
Tumblr	★★★	輕博客的祖師爺
Wordpress	★	這玩意古老到我都不想介紹鳥

使用hexo/jekyll + GitPage，前端搭建靜態博客那是相當easy。用Markdown寫文章做記錄，再push到Git上，分分鐘高大上有木有

CSS

名稱	推薦指數	備注/說明
LoadersCSS	★★★★☆	用CSS技術實現loading動畫；補一句，想熟悉、理解keyframes、animation、transform、transition的童鞋可以直接去讀其源碼(只有千把行代碼)，讀完就算出師鳥:)
WeUI	★★★★☆	一套同微信原生視覺體驗一致的基礎樣式庫為微信Web開發量身設計，令用戶的使用感知更加統一
HINT.css	★★★★	一款非常小巧的提示框效果
Hover.css	★★★★	很多鼠標Hover態的效果，可以給產品學習一下:)
csscss	★★★★	用于檢查css代碼冗余
purecss	★★★☆	小巧的響應式CSS庫，Yahoo!出品

瀏覽端JS

名稱	推薦指數	備注/說明
Echarts	★★★★★	好用，最關鍵的是支持的圖表展示非常之多，強烈推薦
Swiper	★★★★★	強大的Slider庫其實這類效果庫非常多，但文檔能那么專業的就很少鳥
fullPage	★★★★☆	非常好用的全屏滑動庫，看demo就明白
PhotoSwipe	★★★★☆	偶常用的js庫官網上有這么一句很關鍵、重要"no dependencies"
Vuejs	★★★★☆	比較喜歡其作者... 所以勞資正在看源碼學習學習
Highcharts	★★★★	Highcharts中文網，又是一個圖表庫確實功能強大，但是覺得不好看... PS：官網就做的不好看，臟臟的趕腳
videojs	★★★☆	當下視頻需求都用上<video>鳥樣式和交互統一的問題交給videojs搞定:)
impress.js	★★☆	用來寫PPT不錯，偶也曾為其寫過一篇 impress.js初體驗
Cropper	★★☆	國人開發的圖片裁剪庫

Swiper/PhotoSwipe/fullPage有這仨庫，微信里常見的H5頁完全不是問題噠

NodeJS

作為一名大前端甚至是多端，Node絕逼是必備的一塊

社區活躍、部署方便都是令我對Node愛不釋手的主要原因

名稱	推薦指數	備注/說明
anywhere	★★★★★	隨時隨地將你的當前目錄變成一個靜態文件服務器的根目錄
supervisor	★★★★★	監控Node代碼，自動重啟。 A supervisor program for running nodejs programs
nodemon	★★★★★	監控Node代碼，自動重啟。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.
pm2	★★★★★	是一個帶有負載均衡功能的Node應用的進程管理器
async	★★★★☆	一個流程控制工具包，提供直接而強大的異步功能
lodash	★★★★☆	JS工具庫Underscore.js的一個fork發展而來
socket.io	★★★★☆	預計Node的實時框架聊天室、頁游等對實時性有高要求的較適用
Mongoose	★★★★☆	讓NodeJS更容易操作Mongodb數據庫；附上一篇 Mongoose學習參考文檔
koa	★★★★☆	玩Node都知道express，但使用koa的就少很多，門檻比Ex稍高通過generator避免繁瑣的回調函數嵌套，強烈推崇官方的文章教程
Shipit	★★★★☆	一個強大的自動化部署工具。 shipit很多地方非常類似gulp，他們的核心都是任務系統。
node-inspector	★★★★☆	Node調試工具，使用起來跟Chrome的JS調試器很相似
winston	★★★★☆	Node服務最流行的日志庫之一
thenify-all	★★★★	把異步的方法變成Promise的 Promisifies all the selected functions in an object
PhantomJS	★★★★	一般用來做抓取截圖和無界面測試也可以用來操作DOM和網絡監測，很好玩的庫 Quick Start
Mocha	★★★★	Node里最常用的測試框架；它支持多種node的assert libs；同時支持異步和同步的測試，同時支持多種方式導出結果；也支持直接在browser上跑JS代碼測試。
everyauth	★★★★	OAuth的集成解決方案
shelljs	★★★☆	寫Node時難免需要用shell去操作些神馬 shelljs是基于Node的shell工具，Api及其簡單
hashids	★★★☆	看名稱就懂，給userid加解密用的
colors	★★☆	花俏的小工具讓打印console.log時有更好的展示樣式

Node學習指南

名稱	推薦指數	備注/說明
node.js中文資料導航	★★★★★	Node的中文資料導航，start1300+
從零開始nodejs系列文章	★★★★★	基本上每一篇都看過，強烈推薦
Node.js 包教不包會	★★★★★	值得閱讀，看完絕不用買書鳥
七天學會NodeJS	★★★★★	勞資還沒看，不過看目錄還不錯:)

Build 項目構建

Gulp+Webpack的使用套路參考:learning-gulp

Gulp資料收集：use-gulp

推薦篇與Webpack相關的文章《 CSS Modules 》

Webpack用起來吼吼：webpack-howto

名稱	推薦指數	備注/說明
Webpack	★★★★★	項目構建工具，由于過于復雜和太強大，所以勞資還沒去深入研究。精選閱讀中有篇資料就是介紹Webpack和React的工作機制。
Gulp	★★★★★	Gulp是基于Node實現Web前端自動化開發的工具。學習資料附上GulpBook
Gitlab CI	★★★★	一套基于 Gitlab 的持續集成服務
Bower	★★★★	一句話解釋：A package manager for the web

Gulp推薦包

Gulp最基礎的庫就不列在下表格中鳥，其中包括：

gulp-concat 作用是 連接/合并 文件
gulp-cssshrink CSS文件壓縮
gulp-uglify JS文件壓縮

名稱	推薦指數	備注/說明
gulp-webpack	★★★★★	webpack與gulp配合，開啟前端Build新紀元 webpack plugin for gulp
gulp-rev	★★★★☆	高大上第一步，靜態文件名稱變成HASH名稱
gulp-rev-collector	★★★★☆	配合 gulp-rev 使用，自動用HASH替換模板內靜態文件名
run-sequence	★★★★	Gulp任務機制為并行，RS使得有依賴的任務可串行執行使用gulp-rev時得用RS配合要不并行的生成配置和處理.html文件不能同事生效
gulp-util	★★★★	內含一套方法庫，功能太多個人感覺更喜歡功能單一的包，不太喜歡這種大雜燴
gulp-connect	★★★★	有reload功能的Run Webserver工具我一般用來livereload，即保存之后自動刷新頁面
gulp-load-plugins	★★★★	可加載package.json內與Gulp相關的插件省去鳥一行一行require的功夫咯
gulp-clean	★★★☆	移除文件或文件夾的包
gulp-replace	★★★☆	其功能看名字就知道，用做字符串替換的
gulp-autoprefixer	★★★☆	叼炸天的自動處理瀏覽器前綴的包文檔地址：usage
gulp-rename	★★★	把文件重命名結構設計的好不太會用到這個
gulp-flatten	★★★	刪除或替換文件的相對路徑；一般我這用來移動img或者其他靜態文件到新目錄同上：結構設計的好不太會用到這個

精選閱讀

以下內容不包括NodeJS和面試相關的，俺已經單獨準備好鳥

名稱	推薦指數	備注/說明
stream-handbook	★★★★★	如果學習Nodejs，那么流一定是需要掌握的概念
ReactNative 中文版	★★★★☆	翻譯自官方的中文文檔
Mac設置指南	★★★★☆	Mac使用必看尤其適合偏執狂/強迫癥患者:)
MongoDB極簡實踐入門	★★★★☆	入門推薦的套路，非常淺顯易懂
ReactWebpackCookBook	★★★★☆	此書會引導讀者是進入React和Webpack的世界。倆都是非常前沿的技術，同時使用會更有趣。
ReactNative學習指南	★★★★	新玩意層出不窮... 對于能持續學習的童鞋，這是個美好的時代
HTML/CSS 編碼規范	★★★☆	編寫靈活、穩定、高質量的HTML和CSS代碼的規范
GulpBook	★★★☆	Gulp是基于Node實現Web前端自動化開發的工具
Markdown資料	★★★☆	簡單看些語法入門，快速用起來

前端面試

名稱	推薦指數	備注/說明
在LinkedIn做面試官的故事	★★★★★	非面試題，介紹LinkedIn的面試過程文章有很多中肯的建議和想法，推薦閱讀
大漠：寫給前端面試者	★★★★★	這篇文章不涉及任何的面試題大漠與大家聊聊面試者與被面者之間的感受...
前端面試題	★★★★☆	Git上非常火的前端面試題，start17k+

工具/軟件

Web

名稱	推薦指數	備注/說明
CanIuse	★★★★★	前端必備；查看瀏覽器對各種新特性的兼容情況
百度腦圖	★★★★★	非常方便的思維導圖工具
ProcessOn	★★★★☆	和百度腦圖的功能類似，腦圖工具。
VimAwesome	★★★★☆	Vim插件集合， Vim黨必備
Tower	★★★★☆	小而美的多人協同工具。不光只有Web版，還有iPhone、iPad、Android、微信版。
smallpdf	★★★★	提供各種格式和pdf互相轉換
Cmd Markdown	★★★★	好用的Web版Markdown編輯器
StackEdit	★★★★	又是一款Web版Markdown編輯器
墨刀	★★★★	一個在線移動應用原型制作工具。旨在幫助產品經理快速制作可在手機端展示的移動應用原型。
htm2pdf	★★★★	HTML to PDF
Speaker Deck	★★★★	在線的演講稿展示平臺

APP

以下列表中的APP都是不區分系統平臺的

名稱	推薦指數	備注/說明
印象筆記	★★★★★	免費賬號完全夠用，跨平臺跨終端的記錄軟件

Android

名稱	推薦指數	備注/說明
小米桌面	★★★★★	多好看、多漂亮談不上，關鍵是沒有廣告

iPhone

名稱	推薦指數	備注/說明
Monkey	★★★★	Monkey是iPhone上一個GitHub第三方客戶端。展示 GitHub 上的開發者的排名，以及倉庫的排名

Mac

對于美好事務的追求無論何時都不算晚，前年公司給配了臺Mac用做測試開發機，于是開始在Mac下辦公。 Windows？ 回不去鳥...

名稱	推薦指數	備注/說明
Homebrew	★★★★★	沒它程序猿沒法好好干活...Homebrew使OS X更完美。使用gem來安裝gems、用brew來搞定那些依賴包
BrowseShot	★★★★★	我正在使用的網頁截圖工具，強烈推薦
馬克鰻	★★★★☆	MarkMan，非常強大好用的標注、測量工具。日常工作免費版就完全可以滿足，強烈推薦
WebStorm	★★★★☆	功能超強的前端IDE，不多介紹，誰用誰知道
Atom	★★★★	2015年7月之前，在桌面環境下我最喜歡的編輯器是Sublime。但之后就是Atom，俺也專門為它寫了篇 *使用紀要*
Wireshark	★★★☆	說實話，Mac下木有Fiddler挺不習慣，不過在有更強大的替代品
SourceTree	★★★☆	一款好用的的Git客戶端工具，重點是支持中文:)
focus booster	★★★	因為比較在意時間管理，所以這軟件是俺工作時間的必備之物
Mou	★★	小清新的Markdown編輯器

Linux

名稱	推薦指數	備注/說明
oh-my-zsh	★★★★★	*終端黨* 必用的好工具，強烈推薦
tree	★★★★	linux以樹狀圖逐級列出目錄的內容
oneapm	★★★★	強大的運維工具，提供多種監控客戶端；有采集、分析、展示等一套功能； PS：我這用了服務器監控(免費哦)
httpie	★★★☆	一個CLI中的HTTP客戶端用法簡單、易讀

Chrome瀏覽器插件

名稱	推薦指數	備注/說明
JSONView	★★★★★	麻麻再也不用擔心偶調試接口啦
wappalyzer	★★★★☆	分析網站使用的技術它可以檢測網頁的web服務器、JS框架等等
二維碼生成器	★★★★☆	RT
User-Agent Switcher	★★★★	模擬各種終端的UA，達到調試目的
Infinity	★★★☆	針對Chrome的插件，新標簽頁會讓你耳目一新

Git

名稱	推薦指數	備注/說明
Git教程-廖雪峰	★★★★☆	俺有看過不少Git的文章，確實這個系列是最通俗易懂的
GitAwards	★★★★	Git工具，可以查看Git排名
Git速查	★★★★	分類清晰的速查表
Git簡明指南	★★★	入門Git的簡明指南，木有高深內容:)
git學習資料整理	★★★	內容包括很多git的相關資料，star1200+

Redis

MongoDB

名稱	推薦指數	備注/說明
Mongoose	★★★★★	讓NodeJS更容易操作Mongodb數據庫。附上一篇 Mongoose學習參考文檔

雜七雜八

放些開發中較有用的雜物在這兒

名稱	推薦指數	備注/說明
.gitignore文件	★★★★	介紹不同語言項目的gitignore模板
Codebabes	★★★	學編程的網站。重點是每通過一個測試，尼瑪對應的妞會脫一件衣服... PS:國內或許不能訪問哦~
ReadmeSample	☆	項目高大上的第一步就是包裝，所以來看看README的書寫套路吧

前端炫技-_炫酷狂拽叼炸天站點_

名稱	推薦指數	備注/說明
windows93	★★★★★	模擬Win93桌面，思路、體驗和整體效果比較有意思
GeekTyper	★★★★★	好玩又具有Geek精神的網站，雖然創建的目的是個惡作劇 PS：網站需國內或許不能訪問
Mapbox	★★★★★	非常叼的開源項目，有方便的JSAPI(還有SDK)。不過免費版只能淺嘗，流量有限。 PS：網站需國內或許不能訪問
SuperScrollorama	★★★★	好玩好看的動畫庫，鏈接是SuperScrollorama的展示頁
parallax.js	★★★	一個視差引擎的官網，在電腦和手機上都有很好的體驗
墨刀	★★	一個在線移動應用原型制作工具。旨在幫助產品經理快速制作可在手機端展示的移動應用原型。

以下是拔赤總結的前端技能圖：大前端的瑞士軍刀

完善ing，慢慢把 Evernote 和 瀏覽器書簽 里面的好東西慢慢搗騰到這兒，更歡迎PR，謝謝。

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1444827134357.html

前端前端技術

大前端的瑞士軍刀

大前端工具集

您可以通過以下方式聯系到我：

目錄

正文

前端組織

前端博客

博客搭建

CSS

瀏覽端JS

NodeJS

推薦Package

Node學習指南

Build 項目構建

Gulp推薦包

精選閱讀

前端面試

工具/軟件

Web

APP

Mac

Linux

Chrome瀏覽器插件

Git

Redis

MongoDB

雜七雜八

前端炫技-_炫酷狂拽叼炸天站點_

相關經驗

相關資訊

相關文檔

目錄