百宝箱 │大前端的工具集

No.1 博客搭建

1.Hexo

快速、简洁且高效的博客框架，照着文档分分钟就可以在本地跑起来。

Github 地址:Hexo

2.Jekyll

Jekyll - 将纯文本转化为静态网站和博客。由于环境依赖的问题，所以安装起来可能稍费劲那么一点。

Github 地址：Jekyll

3.GithubPages

免费的静态站点。配合着 Hexo 或 Jekyll 的模板，分分搭建出一套炫酷的个人博客。

4.Tumblr

轻博客的祖师爷，各种各样的主题感觉不错。

5.Wordpress

Wordpress - 这玩意古老到都不想介绍

笔者注：使用 Hexo/Jekyll + GitPage，前端搭建静态博客那是相当 easy。用 Markdown 写文章做记录，再 push 到 Github 上，分分钟高大上有木有

再推荐三款视觉效果极佳的 Hexo 主题，且在 Github 上的 star 都很不错：

★ NexT

★ Yilia

★ Tranquilpeak

不能偏心，所以也推荐三款 Jekyll 的好主题：

★ So Simple

如果你看过俺的微博就不会陌生啦

★ HPSTR

当初 fefork 差点选这个主题:)

★ beautiful

No.2 HTML

纯 HTML 相关其实没有好玩的项目，所以这儿展示的内容主要都是一些模板，而且以下列出来的都是免费的，方便拿取搭架后台或者博客

1.HEAD

最全的 列表，真心佩服这种偏执的整理能力

2.blur-admin

视觉冲击极强的管理后台，各种动画效果。PS：因为团队有ant-design的使用经验，感觉使用起来不是很顺畅，这套后台又是基于AngularJS，所以再三权限之后还是没实际使用，劳资还是别给团队添乱了，囧...

3.AdminLTE

很小清新的后台模板，每次看preview 页面都觉得很有视觉冲击。

4.gentelella

刚用这个搭建了我司内部用的的数据平台，效果喜人。模板实现的功能比较全，比如登录、注册甚至各种 widget，所以最终交付的时候，自己几乎没写几行CSS。

5.material-design-lite

Star 数超过2W的开源模板项目，包含了多套简洁的 templates，可以用于博客、后台或者企业首页。

No.3 CSS

1.MetroUI

好看好用，重点是样式特别、个性

2.Font-Awesome

图标字体库。相类似的库有不少，大厂都喜欢造轮子嘛:)

3.LoadersCSS

用 CSS 技术实现 loading 动画； 补一句，想熟悉、理解 keyframes、animation、transform、transition 的童鞋可以直接去读其源码(只有千把行代码)，读完就算出师鸟:)

4.WeUI

一套同微信原生视觉体验一致的基础样式库 为微信 Web 开发量身设计，令用户的使用感知更加统一。

5.PostCSS

最近才知道大名鼎鼎Autoprefixer是其插件。

推荐大漠的文章《PostCSS深入学习》，有关 PostCSS 不是什么？PostCSS 是什么？PostCSS 可以做什么等等问题，文章里面有答案。

6.CSSgram

图片滤镜库，终于可以用 CSS 在 web 上实现滤镜的效果鸟 IE不支持，不过新的移动设备支持没问题 Can I Use。

7.HINT.css

一款非常小巧的提示框效果。

8.Balloon.css

同上，一款非常小巧的提示框效果。

9.Hover.css

很多鼠标 Hover 态的效果，可以给产品学习一下:)

10.Cursor

记录各浏览器对Cursor的支持情况。

11.csscss

用于检查 CSS 代码冗余。

12.purecss

小巧的响应式 CSS 库，Yahoo!出品

13.hamburgers

简单的动画库，让 Click(or Tap) 变得美妙。

14.cssmatic

一个帮忙调试CSS效果的工具。

No.4 浏览端 JS

1.requirejs

JS模块化是构建复杂项目的第一步

中文学习文档奉上：RequireJS 中文网

2.ECharts

好用，最关键的是支持的图表展示非常之多，强烈推荐。

3.Swiper

强大的 Slider 库 其实这类效果库非常多，但文档能那么专业的就很少鸟。

4.babel

ES6 用起来。这个插件可以让我们用新的标准/提案写 JavaScript 代码，然后再向下转换编译，最终生成随处可用的 JavaScript 代码。

中文文档奉上《babel-handbook》

5.fullPage

非常好用的全屏滑动库，看 Demo 就明白

6.PhotoSwipe

偶常用的 js 库 官网上有这么一句很关键、重要"no dependencies"

7.Vuejs

比较喜欢其作者... 所以劳资正在看源码学习学习

8.favico.js

动态改变浏览器标签栏中的网站图标，非常好玩

9.ant.design

蚂蚁金服搞的良心项目，文档美好的令人发指 样式优雅，强烈推荐内部系统尝试此库。

10.daterangepicker

时间选择插件的不二选择，基于 Bootstrap 和 Moment.js

11.nodePPT

前同事三水的大作，好用必须得支持:) 用 Markdown 写 PPT，还可以 HTML 混排，上手飞快

12.Sortable

拖拽神器，用了就知道

13.toastr

信息提示的库，推荐的原因是卖相好、功能强大 demo

14.peity.js

jQuery的图表插件，特别cute，感觉萌萌哒 将HTML转换成一个小的< svg >饼图、圆环图、折线图等等

15.emojify.js

能够将emoji关键词转换为emoji图片的JS插件，可以快速的为你的网站提供emoji表情支持

16.Push.js

基于 Notification API 实现的桌面效果的提示栏。浏览器支持情况不错，如http://caniuse.com/#search=Notification

17.Highcharts

Highcharts 中文网，又是一个图表库 确实功能强大，但是觉得不好看... PS：官网就做的不好看，脏脏的赶脚

18.NProgress

使页面加载时有更好的loading效果

19.Noticejs

一个简单的通知库，木有依赖

20.onepage-scroll

依赖 jQuery 的单页滚动库，和 fullPage 类似

21.videojs

当下视频需求都用上 < video >鸟 样式和交互统一的问题交给 videojs 搞定:)

22.clipboard

仅 2KB 大小，搞定剪贴板功能，屌不屌~ 但是，Safari 不支持...

23.impress.js

用来写 PPT 不错，偶也曾为其写过一篇impress.js 初体验

24.Cropper

国人开发的图片裁剪库

笔者注：Swiper/PhotoSwipe/fullPage 有这仨库，微信里常见的 H5 页完全不是问题哒

No.5 Project Build

1.pm2

是一个带有负载均衡功能的 Node 应用的进程管理器； 是 Forever 的进阶库，想了解的可以看这篇文章《拥抱PM2》

2.Webpack

项目构建工具，由于过于复杂和太强大，所以劳资还没去深入研究。

3.Gulp

Gulp 是基于 Node 实现 Web 前端自动化开发的工具。

俺总结了篇《gulp使用小结》，推荐您阅读:)

4.Bower

前端项目的包管理其实是件复杂的事 谁谁谁依赖谁谁谁，谁谁谁依赖谁谁谁的某个版本...卧槽 Bower 就是搞定这件事儿的，亲爹是 Twitter

推荐篇 Bower 的中文文章：《bower 解决 js 的依赖管理》

5.Grunt

和 Gulp 类似，都是项目构建的常见选择 对比这俩的文章可谓不少，推荐篇《Gulp vs Grunt》 英盲又想看文档，可以去Grunt 中文网

6.FIS

度厂出品的前端构建工具 文档清晰，功能强大，推荐了解和使用

7.Gitlab CI

一套基于Gitlab的持续集成服务

笔者注：Gulp + Webpack 的使用套路参考: learning-gulp

Gulp 资料收集：use-gulp

推荐篇与 Webpack 相关的文章《CSS Modules》

Webpack 用起来吼吼：webpack-howto

No.6 Node Package

作为一名大前端甚至是多端，Node 绝逼是必备的一块

笔者注：有关 Node 的学习资料，请访问网站。这里介绍些有特色且前端有必要知道的包

1.anywhere

随时随地将你的当前目录变成一个静态文件服务器的根目录

2.supervisor

监控 Node 代码，自动重启。 A supervisor program for running nodejs programs

3.nodemon

监控 Node 代码，自动重启。 Nodemon is a utility that will monitor for any changes in your source and automatically restart your server.

4.pm2

是一个带有负载均衡功能的 Node 应用的进程管理器； 是 Forever 的进阶库，想了解的可以看这篇文章《拥抱PM2》

5.async

一个流程控制工具包，提供直接而强大的异步功能

6.lodash

JS 工具库 Underscore.js的一个 fork 发展而来

7.socket.io

预计 Node 的实时框架 聊天室、页游等对实时性有高要求的较适用

8.Mongoose

让 NodeJS 更容易操作 Mongodb 数据库

9.CNPM

淘宝 NPM 镜像，提供了 NPM 同步的服务 当然可不仅仅这样，利用 CNPM 可以打造企业/个人私有的 NPM 服务

推荐篇搭建私有NPM的文章：《CNPM搭建私有的NPM服务》

10.koa

玩 Node 都知道 express，但使用 koa 的就少很多，门槛比 Ex 稍高 通过 generator 避免繁琐的回调函数嵌套，强烈推崇 官方的文章教程。

11.Shipit

一个强大的自动化部署工具。 shipit 很多地方非常类似 gulp，他们的核心都是任务系统。

12.node-inspector

Node 调试工具，使用起来跟 Chrome 的 JS 调试器很相似

13.winston

Node 服务最流行的日志库之一

14.co

用 generator 写法让异步代码同步

thenify-all - 把异步的方法变成 Promise 的 Promisifies all the selected functions in an object

15.PhantomJS

一般用来做抓取截图和无界面测试 也可以用来操作 DOM 和网络监测，很好玩的库 Quick Start

16.ava

偶是应TJ大神推荐而得之的 ava 未来的测试运行器

17.Mocha

Node 里最常用的测试框架； 它支持多种 Node 的 Assert libs； 同时支持异步和同步的测试，同时支持多种方式导出结果； 也支持直接在 browser 上跑 JS 代码测试。

18.koa-validate

koa 的校验库 可以非常方便的对 queryString 或 postBody 的信息进行验证

19.line-reader

基于steam的按行读文件，偶处理日志时用哒 要不实现一个按行读文件，又得 steam、 又得 chunk，还是比较麻烦的

20.everyauth

OAuth 的集成解决方案

21.shelljs

写 Node 时难免需要用 shell 去操作些神马 shelljs 是基于 Node 的 shell 工具，API 及其简单

22.hashids

看名称就懂，给 userid 加解密用的

23.node-pool

让 Node 有连接池的概念

24.colors

花俏的小工具 让打印console.log时有更好的展示样式

25.n

控制Node的版本，想升级一行代码搞定

笔者注：supervisor 和 nodemon 这俩都是监控 Node 代码，使得每次修改代码后会，开发 Node 程序必备

以上库俺都有使用过，甚至有不少都是项目开发中、各种特定场景下必用的，有任何使用问题欢迎沟通哈:)

想了解更多的前端工具？想看到更多的干货？请戳 >>

---

来自：nieweidong (Darren) · GitHub

链接：https://github.com/nieweidong/fetool

作者：微博 @聂微东

个人 Blog fefork.com

博客园 犀利的东哥

已获转载授权