前端
工具
总结
github地址我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的前端工具记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!
前端环境软件安装
node.js很多东西都需要它
npm,cnpm,spm安装可以更换淘宝的安装包地址(淘宝镜像)
Ruby(git依赖) ,msysgit/TortoiseGit/SourceTree[win7以上]
gulp下面会列出常用插件 ,F.I.S (百度前端工具框架)
git
还有另外一个工具(在xp,win7上可用还是图形的哦,还有文章)点我
安装顺序 先安装node
--> npm
--> gulp
使用 gulp 构建工程先安装ruby
--> git
,sass
,compass
常用工具列表：
WebStrom我个人比较喜欢这个软件,功能非常强大已经更新到第10版(点我下载注册机和配色方案) ,sublime_text(文章介绍),HBuilder
cmder(类似cmd的命令提示符,有自带git版本)配置教程
koala考拉(Less、Sass、Compass、CoffeeScript编译) ----免费
Mark 马克鳗(设计图测量)
小苹果服务器(手机调试专用win7以上)
F5自动刷新浏览器
Notepad++不解释
Photoshop CS4/CS6 不解释,PS插件?建议去设计优
计算器 不解释
右键助手1.0 (我自己开发的,详细点这里) ,彗星小助手（取色） , W3Cfuns前端开发工具箱 (到百度分享查看下载地址)
AdobeDreamweaverCS4 写表格,热点图
WampServer 搭建PHP环境服务器
MyWebServer 迷你型服务器
FlashFXP (ftp上传工具)
Regex Match Tracer 2.1 (正则工具)
SETUNA2(图片裁剪对比)
Markdown Pad 2(写Markdown格式文档必备的软件,我文章是用在线版)
Winmerge开源的文件比较工具(如果你不能使用Beyond Compare)
Expresso是一个.NET版本的正则表达式编辑器。可以测试你的正则表达式。
页面性能分析工具(比较重要就不分类,直接一个大类)
gtmetrix 网站性能分析 - 推荐不想用插件工具就直接访问网页吧
WebPagetest一款非常优秀的网页前端性能测试工具国外在线地址国内阿里在线地址
谷歌插件PageSpeed(页面性能检测优化 - 我自己测试卡到一半?我浏览器逗比?)
谷歌插件Google Web Tracing Framework(持移动、PC，性能分析的神器,又一个鸡文,反正我是不懂怎么用~)
火狐请参考 YSlow
web应用性能检测-百度只支持移动端页面
性能检测工具Tracker.js- 他的谷歌插件, WEB前端助手(FeHelper)
火狐浏览器插件
Firebug
YSlow 性能检测
JSONView 在页面查看那json数据
CSSUsage 检测无效css
Dust-Me Selectors 检测页面css沉余
FireQuery jq语法高亮
FireRainbow js语法高亮
HtmlValidator html文档标准检测
NoScript 控制页面和浏览器js
FireGestures用鼠标手势命令
Adblock Edge广告过滤
webDeveloper1.2.2-(zh-cn) 中文版,点我
除了最后一个网上可能找不到中文版
谷歌浏览器插件 --用到谷歌插件其实很少(其实我自己用的蛮多),为了方便,因为谷歌插件下载很多问题,我直接发到网盘,有需要的可以自己下载(360,猎豹应用市场也有好多应用)
Web Developer(居然被我找到谷歌版的,不过是英文的,不错了)
Window Resizer(允许你快速调整浏览器窗口分辨率)
CSSViewer(浮动面板简单显示CSS属性)
Wappalyze(分析网站使用什么技术,优化的时候可以看人家网站使用什么技术)
IE Tab(直接在Chrome中使用IE渲染引擎模仿IE,IE6、IE7、IE8和IE9,扩展目前仅适用于Windows系统,感觉有点不靠谱)
Clear Cache(能让你从工具栏中清除缓存)
Image Downloader(批量下载图片)
谷歌加速插件 替换一些需要翻墙才能链接的js替换为国内链接
JetBrains IDE Suport (配合WS 在浏览器同步刷新,似乎在谷歌高版本已经无效,如果你不使用ws,可以配合gulp的插件,也可以实现同步更新)
ReRes开发的时候替换测试路径为本地,实际是上线后的地址
Enable Copy 去除右键限制
JSON View 查看json格式数据
WEB前端助手(FeHelper)_v5.8
有道云笔记网页剪报 (保存页面到有道笔记本)
Firebug Lite 谷歌用火狐插件(哈哈,开发者用火狐提供的ie火狐js搞的吧)
网址转二维码(手机测试中有用,扫描就打开测试地址了)
ScriptSafe汉化版 (可以控制页面的js脚本)
Word Count 是一款用来统计选中网页的字数，支持中文的扩展。
建议访问360云盘共享文件多,有点乱,自己翻 访问密码 a505
其他软件工具
Flux调整屏幕亮度,暖色调
ADSafe过滤广告
Everything快速查询
Clover让你的Windows资源管理器拥有像谷歌浏览器一样好用的多标签页
360云盘同步数据文件
有道云笔记协作同步开发
Proxy SwitchySharp 代理工具,翻墙用的,需要自己找账号信息填写哦
其他一些网上工具
在线切图工具(最近找到的,不知道如何,欢迎大家测试)
配色方案(美工的工具)
WhatTheFont-字体查询1求字体网-字体查询2What Font is-字体查询3
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)
智图图片处理插件 (gulp-imageisux)
将文件转成utf8编码的gulp插件(gulp-utf8-convert)
合并按模块引入的html文件(gulp-content-includer)
压缩html (gulp-minify-html)
帮助文档
css手册在线(里面可以下载,感谢作者:飘零雾雨)
其他在线手册自己看吧,应该有的都有了
谷歌搜索地址(不用翻墙)
再一次感谢您花费时间阅读这篇文章,如果你有更好的工具,可以给我留言,其他资料还在整理当中,感谢你的阅读!
作者@黑色技术、
