个人前端工程师开发工具记录
github地址
我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的前端工具记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!
前端环境需要的软件
安装顺序
1.安装node,安装完成就会有 npm 环境
2.设置淘宝镜像
#临时使用npm --registry https://registry.npm.taobao.org install express#持久使用（推荐）npm config set registry https://registry.npm.taobao.org#通过cnpm使用（推荐）npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装gulp 使用 gulp 构建工程
npm i -g gulp
3.1.安装Webpack
npm i -g webpack
3.2.安装Browsersync
npm i -g browser-sync
4.安装ruby,（win7-8,win10选择 2.0以上的版本） window 安装 sass compass 记录
安装注意:全部打钩,安装在哪里都可以 [根据需求,一般默认C盘]，安装完毕, 重启 cmd , 输入 gem 命令
如果提示"RubyGems is a sophisticated package manager for Ruby. This is a basic help message containing pointers to more information. ",即安装成功.
4.1更换淘宝镜像，有代理可以跳过这步骤
#删除默认gem sources --remove https://rubygems.org/#添加镜像gem sources --add https://gems.ruby-china.org/#orgem sources --add http://gems.ruby-china.org/#winodws 添加会因为SSL证书问题出错Error fetching https://gems.ruby-china.org/:SSL_connect returned=1 errno=0 state=SSLv2/v3 read server hello A: sslv3 alert handshake failure (https://gems-ruby-china.b0.aicdn.com/specs.4.8.gz)#解决办法？FUCK,翻墙吧or洗洗睡#查看列表gem sources -l#正常情况会输入如下信息*** CURRENT SOURCES ***https://gems.ruby-china.org/# 请确保只有 gems.ruby-china.org
4.2 安装sass
gem install sass#是否安装成功sass -v#输出信息Sass 3.4.9 (Selective Steve)
4.3 安装compass
gem install compass#是否安装成功compass -v#输出信息Compass 1.0.1 (Polaris)Copyright (c) 2008-2014 Chris EppsteinReleased under the MIT License.Compass is charityware.Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
编辑器IDE
尝试工作流工具/手架
常用工具列表：
- jsinspect 重构,检测相似的代码片
- Easy Moc 模拟数据最好方案,提供的功能非常强大
- [Shadowsocks 科学上网 带有一个免费账号 https://github.com/yyman001/software] (https://github.com/shadowsocks/shadowsocks-windows)
- Beyond Compare 4 文件对比
- cmder(类似cmd的命令提示符,有自带git版本) 配置教程
- koala考拉(Less、Sass、Compass、CoffeeScript编译) ----免费
- WeChatPlugin-MacOS 微信小助手-调试开发
- 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搭建环境,包含多个版本随便切换
- 字体解决方案1-字蛛是一个中文字体压缩器,让网页自由引入中文字体成为可能
- 字体解决方案2-Fontmin,第一个纯 JavaScript 字体子集化方案
- [雪碧图合并 Cyotek Spriter ]
- [雪碧图合并 TexturePackerGUI - 这个厉害点,支持生成雪碧图后的坐标值文件]
页面性能分析工具
火狐浏览器插件
- 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) 中文版,点我 （除了最后一个网上可能找不到中文版）
谷歌浏览器插件
- Sight 通过各种主题和字体选项，Sight将网站的源代码以更为视觉舒适的形式强调。
- 海淘访问助手 -免费翻墙谷歌插件-强烈推荐
- 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)
其他软件工具
其他一些网上工具
gulp常用插件
帮助文档
WebStorm配置
VsCode配置
Sublime Text 3配置
再一次感谢您花费时间阅读这篇文章,如果你有更好的工具,可以给我留言,其他资料还在整理当中,感谢你的阅读!
作者 @黑色技术
创建时间: 2015 年 3月 15日
更新时间: 2017 年 11月 22日
