我们前端,每个人都有自己的开发工作环境,工具等,所以我写了这一篇文章,为自己方便把自己常用的前端工具记录下来,以便到时候在新的电脑上可以快速搭建自己熟悉的工作环境和使用自己熟悉的工具,同时可能也会对你有少少的帮助吧!
前端环境软件安装
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插件?建议去 设计优
计算器 不解释
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）
再一次感谢您花费时间阅读这篇文章,如果你有更好的工具,可以给我留言,其他资料还在整理当中,感谢你的阅读!