前端工程师开发工具记录

我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的前端工具记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!

前端环境软件安装

• node.js 很多东西都需要它
• npm , cnpm , spm 安装可以更换淘宝的安装包地址(淘宝镜像)
• Ruby(git依赖) , msysgit / SourceTree[win7以上]
• gulp 下面会列出常用插件 , F.I.S (百度前端工具框架)
• sass 教程/ less
• git还有另外一个工具(在xp,win7上可用还是图形的哦,还有文章) 点我

安装顺序 
先安装node --> npm --> gulp 
使用 gulp 构建工程 
先安装ruby --> git,sass,compass 
window 安装 sass compass 记录

常用工具列表：

• WebStrom 我个人比较喜欢这个软件,功能非常强大已经更新到第九版(点我下载注册机和配色方案) ,sublime_text(文章介绍),HBuilder
• cmder(类似cmd的命令提示符,有自带git版本) 配置教程
• koala考拉(Less、Sass、Compass、CoffeeScript编译) ----免费
• Mark 马克鳗 (设计图测量)
• 小苹果服务器(手机调试专用win7以上)
• F5 自动刷新浏览器
• Notepad++ 不解释
• Photoshop CS4/CS6 不解释,PS插件?建议去 设计优
• 计算器 不解释
• 右键助手1.0 (我自己开发的,详细点这里) ,彗星小助手（取色） , W3Cfuns前端开发工具箱 (到百度分享查看下载地址)
• AdobeDreamweaverCS4 写表格,热点图
• CSS Sprites 样式生成工具
• WampServer 搭建PHP环境服务器
• MyWebServer 迷你型服务器
• FlashFXP (ftp上传工具)
• Regex Match Tracer 2.1 (正则工具)
• SETUNA2 (图片裁剪对比)

火狐浏览器插件

• 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) 中文版,点我

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

谷歌浏览器插件 --用到谷歌插件其实很少

• 谷歌加速插件 替换一些需要翻墙才能链接的js替换为国内链接
• JetBrains IDE Suport (配合WS 在浏览器同步刷新,似乎在谷歌高版本已经无效)

建议访问 360云盘共享 文件多,有点乱 
访问密码 a505

其他软件工具

• Flux 调整屏幕亮度,暖色调
• ADSafe 过滤广告
• Everything 快速查询
• Wise Registry Cleaner 注册表清理
• Clover 让你的Windows资源管理器拥有像谷歌浏览器一样好用的多标签页
• 360云盘 同步数据文件
• 有道云笔记 协作同步开发

 

其他一些网上工具

• 中国开源在线工具
• 熊猫png压缩
• 智图(多种图片压缩)
• 雪碧图坐标查询

 

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）
• 图片缓存，只有图片替换了才压缩 （gulp-cache） //我也没用过
• 更改提醒 （gulp-notify） //我也没用过
• 清除文件 （del） //我也没用过
• 替换内容 （gulp-replace）

再一次感谢您花费时间阅读这篇文章,如果你有更好的工具,可以给我留言,其他资料还在整理当中,感谢你的阅读!