github地址
我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的**前端工具**记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!
前端环境软件安装
- node.js 很多东西都需要它
- npm , cnpm , spm 安装可以更换淘宝的安装包地址(淘宝镜像)
- Ruby(git依赖) , msysgit / TortoiseGit / SourceTree[win7以上]
- gulp 下面会列出常用插件 , F.I.S (百度前端工具框架)
- sass 教程/ less
git还有另外一个工具(在xp,win7上可用还是图形的哦,还有文章) 点我
安装顺序
先安装node --> npm --> gulp
使用 gulp 构建工程
先安装ruby --> git,sass,compass
window 安装 sass compass 记录
常用工具列表：
- WebStrom 我个人比较喜欢这个软件,功能非常强大已经更新到第10版(点我下载注册机和配色方案) ,sublime_text(文章介绍),HBuilder
- [Shadowsocks 科学上网 带有一个免费账号 https://github.com/yyman001/software] (https://github.com/shadowsocks/shadowsocks-windows)
- cmder(类似cmd的命令提示符,有自带git版本) 配置教程
- koala考拉(Less、Sass、Compass、CoffeeScript编译) ----免费
- Mark 马克鳗 (设计图测量)
- PxCook 像素大厨 智能标注绝对可以解放双手了，强烈推荐。
- Assistor PS (切图工具)
- 小苹果服务器(手机调试专用win7以上)
- brower-sync 自动刷新页面-多端同步,支持gulp
- F5 自动刷新浏览器
- Notepad++ 不解释
- Photoshop CS4/CS6 不解释,PS插件?建议去 设计优
- 计算器 不解释
- 右键助手1.0 (我自己开发的,详细点这里) ,彗星小助手（取色） , W3Cfuns前端开发工具箱 (到百度分享查看下载地址)
- AdobeDreamweaverCS4 写表格,热点图
- CSS Sprites 样式生成工具
- WampServer 搭建PHP环境服务器
- MyWebServer 迷你型服务器
- FlashFXP (ftp上传工具)
- Regex Match Tracer 2.1 (正则工具)
- SETUNA2 (图片裁剪对比)
- Markdown Pad 2 (写Markdown格式文档必备的软件,我文章是用在线版)
- Winmerge 开源的文件比较工具(如果你不能使用Beyond Compare)
- Expresso是一个.NET版本的正则表达式编辑器。可以测试你的正则表达式。
- DocBlockr Sublime Text 2/3-注释生成插件
- JSDOC 注释文档生成工具
- 如此简单的到达 PNG 无损压缩的极限
- APNG Software 转APNG软件
- iSparta 图片压缩
- limitPNG 图片压缩
- phpStudy php搭建环境,包含多个版本随便切换
页面性能分析工具(比较重要就不分类,直接一个大类)
- 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) 中文版,点我
除了最后一个网上可能找不到中文版 Google 镜像站搜集 谷歌浏览器插件 --用到谷歌插件其实很少(其实我自己用的蛮多),为了方便,因为谷歌插件下载很多问题,我直接发到网盘,有需要的可以自己下载(360,猎豹应用市场也有好多应用)
- 海淘访问助手-免费翻墙谷歌插件-强烈推荐
- octotree 看github的时候生成项目tree 推荐
- Awesome Autocomplete for GitHub - github搜索异步查询结果
- Quick CSS 快速在 Chrome 开发环境检测 CSS 代码的规范性
- AlloyDesigner 嵌入式开发插件-详情自己看连接
- 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 是一款用来统计选中网页的字数，支持中文的扩展。
- Chrono下载管理器(https://chrome.google.com/webstore/detail/chrono-download-manager/mciiogijehkdemklbdcbfkefimifhecn) 建议访问 360云盘共享 文件多,有点乱,自己翻
访问密码 a505
其他软件工具
- Flux 调整屏幕亮度,暖色调
- ADSafe 过滤广告
- Everything 快速查询
- Wise Registry Cleaner 注册表清理
- Clover 让你的Windows资源管理器拥有像谷歌浏览器一样好用的多标签页
- 360云盘 同步数据文件
- 有道云笔记 协作同步开发
- Proxy SwitchySharp 代理工具,翻墙用的,需要自己找账号信息填写哦
####其他一些网上工具
##gulp常用插件
整理了在自己工作当中常用的一些gulp 插件
- 编译Sass (gulp-ruby-sass || gulp-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）
- PreCSS预处理1--处理CSS优化 (cssnano)
- BASE64编码图片 (gulp-base64)
- 压缩图片 （gulp-imagemin）
- 雪碧图 (gulp.spritesmith) https://github.com/twolfson/gulp.spritesmith
- 自动刷新页面 （gulp-livereload）//不建议配合WS一起用(WS的自动保存,然后你懂的,但如果你不是用less或者sass开发,还是建议使用的)
- 图片缓存，只有图片替换了才压缩 （gulp-cache） //我也没用过
- 更改提醒 （gulp-notify） //我也没用过
- 外链文件合并 （gulp-htmlone）https://github.com/amfe/or.htmlone.gulp //我也没用过
- 清除文件 （del）
- 替换内容,需自定义范围内容,支持正则[常用于替换上线后的js,css文件路径] （gulp-replace）
- 同上,更加智能 (gulp-rev-collector)
- 智图图片处理插件 (gulp-imageisux)
- 将文件转成utf8编码的gulp插件(gulp-utf8-convert)
- 合并按模块引入的html文件(gulp-content-includer)
- 提取html标记内容合并到指定位置 gulp-html-merge
- 压缩html (gulp-minify-html)
##帮助文档
- css手册 在线(里面可以下载,感谢作者:飘零雾雨)
- jQuery手册 ， 其他版本
- Zepto手册
- Less.js 中文文档
- Bootstrap 中文文档
- Underscore.js (1.8.2) 中文文档
- Backbone.js(1.1.2) API中文文档
- Vue.js 2.0 中文文档
- avalon.js
- 其他在线手册 自己看吧,应该有的都有了
##谷歌搜索地址(不用翻墙) http://www.googto.com/
再一次感谢您花费时间阅读这篇文章,如果你有更好的工具,可以给我留言,其他资料还在整理当中,感谢你的阅读!
作者 @黑色技术 2015 年 3月 15日 更新时间: 2017 年 3月 10日