# resources

**Repository Path**: 858900276/My-Tools

## Basic Information

- **Project Name**: resources
- **Description**: 我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的**`前端工具`**记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2017-04-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人前端工程师开发工具记录

我们前端,每个人都有自己的开发工作环境,工具等,所以写了这一篇文章,为自己方便把自己常用的**`前端工具`**记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!此文章部分属于转载[作者]地址(http://weibo.com/yyman001)

前端环境软件安装

- [node.js](https://nodejs.org/download/)
- [npm](https://www.npmjs.com/) 
- [cnpm](https://cnpmjs.org/) 
- [spm](http://docs.spmjs.org/doc/) 安装可以更换淘宝的安装包地址([淘宝镜像](http://npm.taobao.org/))
- [Ruby](https://www.ruby-lang.org/zh_cn/downloads/)(git依赖)
- [msysgit](https://msysgit.github.io/) 
- [TortoiseGit](http://download.tortoisegit.org/)
- [SourceTree](http://www.sourcetreeapp.com/)[win7以上]
- [gulp](http://gulpjs.com/) 
- [ F.I.S (百度前端工具框架)](http://fis.baidu.com/)
- [sass](http://www.w3cplus.com/sassguide/install.html)/[教程1](http://www.w3cplus.com/sassguide/)/[教程2](http://www.w3cplus.com/sassguide/)/[中文](http://www.sass.hk/)/[英文](http://sass-lang.com/)
- [less](http://lesscss.net/)/[bootstrap less教程](http://less.bootcss.com/)/[中文](http://www.1024i.com/demo/less/reference.html)
- `git`还有另外一个工具(在xp,win7上可用还是图形的哦,还有文章) [点我](http://backlogtool.com/git-guide/tw/intro/intro1_1.html)
 
安装顺序

先安装`node` --> `npm ` --> `gulp` 
[使用 gulp 构建工程](http://www.u396.com/getting-started-with-gulp.html)
先安装`ruby` --> `git`,`sass`,`compass`
[window 安装 sass compass 记录](http://www.cnblogs.com/yyman001/p/install_sass_compass_for_window.html)

前端框架

- [Bootstrap](http://www.bootcss.com/)/[Bootstrap4](http://wiki.jikexueyuan.com/project/bootstrap4/getting-started/introduction/)
- [网易框架](http://nec.netease.com)                                       
- [Foundation](http://www.foundcss.com/getting-started)
- [kickstart](http://getkickstart.com/docs/3.x/)
- [amazeui](http://amazeui.org/)
- [Frozen UI](http://frozenui.github.io/)                              
- [zrender-Cavans框架](http://ecomfe.github.io/zrender/)
- [雅虎框架中文](http://purecss.org/start/)/[英文](http://purecss.io/)
- [H-ui框架](http://www.h-ui.net/Hui-notes-htmlName.shtml)                     
- [button按钮](http://www.bootcss.com/p/buttons/)                                 
- [CSS动画Animate](http://www.dowebok.com/demo/2014/98/)
- [WoWjs](http://www.dowebok.com/131.html)

报表图

- [Highcharts中文网](http://www.hcharts.cn/demo/index.php?p=10&theme=skies)
- [百度Echarts](http://echarts.baidu.com/echarts2/doc/example.html)
- [chart.js](http://www.bootcss.com/p/chart.js/)

字体

- [WhatTheFont-字体查询1](http://www.myfonts.com/WhatTheFont/) 
- [求字体网-字体查询2](http://www.qiuziti.com/) 
- [What Font is-字体查询3](http://www.whatfontis.com/)
- [字体图标Font Awesome](http://fortawesome.github.io/Font-Awesome/icons/)
- [阿里字体图标](http://www.iconfont.cn/)
- [library](https://icomoon.io/app/#/select/library)
- [字体格式转换](http://www.fontsquirrel.com/tools/webfont-generator)

常用工具列表：

- [WebStrom](https://www.jetbrains.com/webstorm/)([下载注册机 & 配色方案](http://pan.baidu.com/s/1iVZ20#path=%252Fwebstorm))
- [sublime_text](http://www.sublimetext.com/)([文章介绍](http://www.codeceo.com/article/sublime-text-usage.html))
- [HBuilder](http://www.dcloud.io/)个人比较喜欢使用Sublime和HBuilder
- [cmder(类似cmd的命令提示符,有自带git版本)](http://bliker.github.io/cmder/)  [配置教程](http://bg.biedalian.com/2014/09/11/cmder.html)
- [koala考拉](http://koala-app.com/index-zh.html)(Less、Sass、Compass、CoffeeScript编译) ----免费
- [Mark 马克鳗](http://www.getmarkman.com/)设计图测量 
- [小苹果服务器](http://www.xbole.com/)手机调试专用win7以上
- [F5](http://getf5.com/)自动刷新浏览器
- [Notepad++](http://notepad-plus-plus.org/)不解释
- Photoshop CS4/CS6 不解释,PS插件?建议去 [设计优](http://www.uisdc.com/)
- [右键助手原创作者开发](https://www.zybuluo.com/yyman001/note/78390) 
- 彗星小助手（取色）
- W3Cfuns前端开发工具箱([到百度分享查看下载地址](http://pan.baidu.com/s/1pJFmnAN))
- AdobeDreamweaverCS4 写表格,热点图
- [CSS Sprites 样式生成工具](http://www.cssforest.org/blog/index.php?id=129)
- WampServer 搭建PHP环境服务器
- MyWebServer 迷你型服务器
- FlashFXP (ftp上传工具)
- Regex Match Tracer 2.1 正则工具
- [SETUNA2](http://www.clearunit.com/clearup/setuna2/) 图片裁剪对比
- [Markdown Pad 2](http://markdownpad.com/) 写Markdown格式文档必备的软件,我文章是用在线版
- [Winmerge](http://winmerge.org/) 开源的文件比较工具(如果你不能使用Beyond Compare)
- [Expresso](http://www.ultrapico.com/Expresso.htm)是一个.NET版本的正则表达式编辑器。可以测试你的正则表达式。

页面性能分析工具

- [gtmetrix 网站性能分析 - 推荐](http://gtmetrix.com/) 不想用插件工具就直接访问网页吧
- [WebPagetest](https://github.com/WPO-Foundation/webpagetest) 一款非常优秀的网页前端性能测试工具 [国外在线地址](http://www.webpagetest.org/) [国内阿里在线地址](http://alibench.com/)
- 谷歌插件 [PageSpeed](https://developers.google.com/speed/pagespeed/insights_extensions) (页面性能检测优化 - 我自己测试卡到一半?我浏览器逗比?)
- 谷歌插件 [Google Web Tracing Framework](http://google.github.io/tracing-framework/) 持移动、PC，性能分析的神器,又一个鸡文,反正我是不懂怎么用
- 火狐请参考 `YSlow`
- [web应用性能检测](http://developer.baidu.com/apm/index)-百度只支持移动端页面
- [性能检测工具Tracker.js](http://ucren.com/tracker/docs/#quickstart) - 他的谷歌插件, `WEB前端助手(FeHelper)` 

火狐浏览器插件 

- Firebug 
- YSlow 性能检测
- JSONView 在页面查看那json数据
- CSSUsage 检测无效css
- Dust-Me Selectors 检测页面css沉余
- FireQuery jq语法高亮
- FireRainbow js语法高亮
- HtmlValidator html文档标准检测
- NoScript 控制页面和浏览器js
- [FireGestures](http://www.xuldev.org/firegestures/) 用鼠标手势命令
- [Adblock Edge](https://bitbucket.org/adstomper/adblockedge/downloads) 广告过滤
- webDeveloper1.2.2-(zh-cn)[中文版](http://pan.baidu.com/s/1pJFmnAN#path=%252F%25E5%2589%258D%25E7%25AB%25AF%25E5%25B7%25A5%25E5%2585%25B7%252F%25E7%2581%25AB%25E7%258B%2590%25E6%258F%2592%25E4%25BB%25B6)

除了最后一个网上可能找不到中文版

谷歌浏览器插件 --用到谷歌插件其实很少(其实我自己用的蛮多),为了方便,因为谷歌插件下载很多问题,我直接发到网盘,有需要的可以自己下载(360,猎豹应用市场也有好多应用)

- [Web Developer](https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm)
- [Window Resizer](https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en%20)允许你快速调整浏览器窗口分辨率
- [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en) (浮动面板简单显示CSS属性)
- [Wappalyze](https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=en%20) (分析网站使用什么技术,优化的时候可以看人家网站使用什么技术)
- [IE Tab](https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=en%20) (直接在Chrome中使用IE渲染引擎模仿IE,IE6、IE7、IE8和IE9,扩展目前仅适用于Windows系统,感觉有点不靠谱)
- [Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en%20)(能让你从工具栏中清除缓存)
- [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj%20)(批量下载图片)
- 谷歌加速插件 替换一些需要翻墙才能链接的js替换为国内链接
- JetBrains IDE Suport (配合WS 在浏览器同步刷新,似乎在谷歌高版本已经无效,如果你不使用ws,可以配合gulp的插件,也可以实现同步更新)
- [ReRes](https://github.com/hanan198501/ReRes) 开发的时候替换测试路径为本地,实际是上线后的地址
- Enable Copy 去除右键限制
- JSON View 查看json格式数据
- WEB前端助手(FeHelper)_v5.8 
- 有道云笔记网页剪报 (保存页面到有道笔记本)
- Firebug Lite 谷歌用火狐插件(哈哈,开发者用火狐提供的ie火狐js搞的吧)
- [网址转二维码](https://chrome.google.com/webstore/detail/%E4%BA%8C%E7%BB%B4%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8/ajaomcmkalmeeahjfdklkcjbljhbokjl?utm_source=chrome-ntp-icon)(手机测试中有用,扫描就打开测试地址了)
- ScriptSafe汉化版 (可以控制页面的js脚本)
- Word Count 是一款用来统计选中网页的字数，支持中文的扩展。

建议访问 [360云盘共享](http://yunpan.cn/cZdfChwFmEpYF)访问密码 a505

其他软件工具

- [Flux](http://www.iplaysoft.com/flux.html) 调整屏幕亮度,暖色调
- [ADSafe](http://www.ad-safe.com/) 过滤广告
- [Everything](http://www.voidtools.com/) 快速查询
- [Wise Registry Cleaner](http://www.wisecleaner.com/download.html) 注册表清理
- [Clover](http://clover.softonic.cn/) 让你的Windows资源管理器拥有像谷歌浏览器一样好用的多标签页
- [360云盘](http://yunpan.360.cn/) 同步数据文件
- [有道云笔记](http://note.youdao.com/) 协作同步开发
- Proxy SwitchySharp 代理工具,翻墙用的,需要自己找账号信息填写哦
- [axure 原型图设计](http://www.axure.com.cn/1896/) / [win破解版](http://www.newasp.net/soft/81224.html)
- [xmind脑图管理](http://www.xmindchina.net/xiazai.html) / [win破解版](http://www.xp85.com/html/XMind.html)

其他一些网上工具

- [中国开源在线工具](http://tool.oschina.net/)
- [熊猫png压缩](https://tinypng.com/)
- [智图(多种图片压缩)](http://image.tencent.com/)
- [雪碧图坐标查询](http://www.spritecow.com/)
- [cssanimate动画制作工具](http://cssanimate.com/)
- [在线切图工具](http://card.qdsay.com/)
- [在线正则regex pal](http://regexpal.com/)
- [正则图形显示](http://jex.im/regulex/#!embed=false&flags=&re=%5E%28a%7Cb%29*?$)
- [浏览器兼容查询](http://caniuse.mojijs.com/)
- [CSS3/HTML5/SVG 兼容性查询表](http://caniuse.com/)
- [can i use](http://caniuse.sinaapp.com) 一个提供HTML5,CSS3,JS等新技术浏览器兼容一览表的网站
- [加载动画](https://github.com/ConnorAtherton/loaders.css)
- [css3动画缓动函数](http://www.xuanfengge.com/easeing/easeing/)[2](http://xuanfengge.com/easeing/ceaser/)[3](http://cubic-bezier.com/#.17,.67,.83,.67)
- [Emmet](http://docs.emmet.io/abbreviations/syntax/)/[速查表](http://docs.emmet.io/cheat-sheet/)
- [jqery插件库](http://www.jq22.com/)(需要充值)
- [bootstrap 小零件（需要翻墙）](http://bootsnipp.com)
- [Bmob移动端后台快速开发](http://www.bmob.cn/docs)
- [Em\px换算](http://pxtoem.com/)

**gulp常用插件**

整理了在自己工作当中常用的一些gulp 插件
- 编译Sass (gulp-ruby-sass)
- 编译Map文件(gulp-sourcemaps)
- 自动添加css前缀（gulp-autoprefixer）
- 压缩css（gulp-minify-css）
- 压缩css使用的gulp-mini-css[国产.配合清除沉余css插件后的压缩插件,跟上面的不一样哦] 
- js代码校验（gulp-jshint）
- 合并js文件（gulp-concat）
- 压缩js代码（gulp-uglify）
- 压缩图片（gulp-imagemin）
- 自动刷新页面（gulp-livereload）//不建议配合WS一起用(WS的自动保存,然后你懂的,但如果你不是用less或者sass开发,还是建议使用的)
- 图片缓存，只有图片替换了才压缩（gulp-cache） //我也没用过
- 更改提醒（gulp-notify） //我也没用过
- 清除文件（del）
- 替换内容,需自定义范围内容,支持正则[常用于替换上线后的js,css文件路径]（gulp-replace）
- 同上,更加智能 ([gulp-rev-collector](https://github.com/shonny-ua/gulp-rev-collector))
- 智图图片处理插件([gulp-imageisux](https://www.npmjs.com/package/gulp-imageisux))
- 将文件转成utf8编码的gulp插件([gulp-utf8-convert](http://segmentfault.com/blog/paopao/1190000000763005))
- 合并按模块引入的html文件([gulp-content-includer](http://segmentfault.com/blog/paopao/1190000001500298))
- 压缩html ([gulp-minify-html](https://www.npmjs.com/package/gulp-minify-html))

**帮助文档**

- [css手册](http://css.doyoe.com/) 在线(里面可以下载,感谢作者:飘零雾雨)
- [jQuery手册](http://hemin.cn/jq/)/[其他版本](http://jquery.js-ku.com/)
- [Zepto手册](http://www.css88.com/doc/zeptojs_api/)
- [Less.js 中文文档](http://www.css88.com/doc/less/)
- [Bootstrap 中文文档](http://bootstrap.css88.com/)
- [Underscore.js (1.8.2) 中文文档](http://www.css88.com/doc/underscore/)
- [Backbone.js(1.1.2) API中文文档](http://www.css88.com/doc/backbone/)
- [菜鸟教程](http://www.runoob.com/)
- [javascript高级](http://www.w3school.com.cn/js/index_pro.asp)
- [jquery中文网](http://www.jquery123.com/)
- [bootstrap网LESS](http://less.bootcss.com/)
- [CSS手册](http://www.dreamdu.com/css/)
- [LESS中文网](http://www.1024i.com/demo/less/reference.html)
- [SCSS](http://www.w3cplus.com/sassguide/)/[中文](http://www.sass.hk/)/[英文](http://sass-lang.com/)
- [gulp中文网](http://www.gulpjs.com.cn/)
- [grunt中文网](http://www.gruntjs.net/)
- [liunx命令](http://man.linuxde.net/)
- [其他在线手册](http://www.css88.com/jqueryapi)

**技术社区 & 博客**

- [w3 help](http://www.w3help.org/zh-cn/kb/)
- [w3ctech](http://www.w3ctech.com/)
- [W3Cplus](http://www.w3cplus.com/)
- [知识库](http://lib.csdn.net/)
- [segmentfault](https://segmentfault.com/)
- [div.io](http://div.io/#/welcome)
- [稀土掘金](http://gold.xitu.io/#/)
- [前端早读课](http://www.zaoduke.net/fe.php)
- [alloyteam](http://www.alloyteam.com) 腾讯团队建设
- [html5基地](http://html5.360.cn) 360团队建设
- [伯乐在线](http://www.jobbole.com/)
- [码农网](http://www.codeceo.com/)
- [前端开发](http://www.wufangbo.com/)
- [源码之家](http://www.mycodes.net/)
- [简书](http://www.jianshu.com/)
- [极客标签](http://www.gbtags.com/gb/tutorials/20/145.htm)
- [specs blog](http://9iphp.com)
- [懒人建站](http://www.51xuediannao.com/)
- [Dowebok](http://www.dowebok.com/)
- [媒体查询](http://nmsdvid.com/snippets/)
- [张鑫旭](http://www.zhangxinxu.com/wordpress/)

**在线配色网址**

- [配色方案](http://card.qdsay.com/)
- [colourco](http://www.colourco.de)
- [摩秀创意](http://mcolor.sinaapp.com)
- [配色网](http://www.peise.net)
- [Material Design 工具](http://www.materialpalette.com)

**设计欣赏**

- [站酷](http://www.zcool.com.cn/) 这个是我个人比较推荐的
- [Material Design 灵感](http://www.materialup.com)
- [uimaker](http://www.uimaker.com/)
- [doooor](http://www.doooor.com/)
- [design63](http://www.design63.com.cn/)
- [behance](https://www.behance.net/)
- [设计之家](http://www.sj33.cn/digital/wysj/)
- [优设](http://www.uisdc.com/)
- [盒子UI](http://www.boxui.com/)

**网页模板**

- [模板王](http://www.mobanwang.com/)
- [模板之家](http://www.cssmoban.com/)

**前端网址导航**

- [地址1]http://www.css88.com/nav/
- [地址2]http://www.whycss.com/

**开源CDN服务**

- [bootstrapCDN](http://www.bootcdn.cn/)

**无须翻墙谷歌搜索地址**

- [地址1](http://ggss.so/)/[地址2](http://www.gfsswy.com/)/[地址3](http://www.googto.com/)