A-A+

百宝箱│大前端的工具集

2016年06月05日 分享区 暂无评论 阅读 1,781 次

前端工具合集

博客搭建

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

 

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,可以用于博客、后台或者企业首页。

 

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效果的工具

 

浏览端 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转换成一个小的饼图、圆环图、折线图等等

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

当下视频需求都用上

impress.js

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

24

Cropper

国人开发的图片裁剪库👨

Swiper/PhotoSwipe/fullPage 有这仨库,微信里常见的 H5 页完全不是问题哒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

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 程序必备

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

 

 

 

 

 

Copyright © 互联网世界 保留所有权利.   Powered by www.zhangjinpeng.com.cn 网站地图   粤ICP备13066957号-2  
内容说明:本站内容及数据部分来自互联网及公开渠道,如有侵权请及时联系我们,本站将在第一时间删除相关资源。

用户登录

分享到: