大前端的瑞士军刀

jopen 9年前

原文 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，谢谢。

大前端的瑞士军刀

大前端工具集

您可以通过以下方式联系到我：

目录

正文

前端组织

前端博客

博客搭建

CSS

浏览端JS

NodeJS

推荐Package

Node学习指南

Build 项目构建

Gulp推荐包

精选阅读

前端面试

工具/软件

Web

APP

Mac

Linux

Chrome浏览器插件

Git

Redis

MongoDB

杂七杂八

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

相关经验

目录