Skip to content

yyman001/web_tools

BranchesTags

Repository files navigation

个人前端工程师开发工具记录

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

前端环境需要的软件

安装顺序

1.window 下载 nvm-windows 直接安装好，再根据需要安装对应的node版本， 报错请重启电脑后再试！

方法一： nvm 安装（官网默认下载安装即可）， 找node 官网找到需要安装的 node version，另外一个版本切换工具n 使用命令行

# 查看安装node 12.22.6, 64位版本
nvm install 12.22.6 64
# 查看已安装的node版本列表
nvm list
# 使用某版本
nvm use 12.22.6
# 后面直接使用npm即可

# 版本切换工具2
npm install -g n

# 安装node版本
n 12.22.6

# 切换,输入 n 然后根据列表选择回车即可

方法二： 直接下载 node 应用程序安装即可

2.安装依赖包管理,更多用法请移步到nrm包官网

// 全局安装
npm i nrm - g

// 参考说明文章  https://juejin.cn/post/6969450118839795749
npm i pnpm -g

// 帮助
nrm help

// 查看列表
nrm ls
// eg:
// # 带有 * 为当前安装依赖源
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

// 切换源(镜像)
nrm use taobao

// 添加源
// eg:
nrm add taobao https://registry.npm.taobao.org/

// yarn
npm install --global yarn 或 npm i -g yarn

// 快速删除 node_modules
npm i -g npkill

npm 常用工具包（可选）

// gulp [使用 gulp 构建工程][16]
npm i gulp 

//Webpack
npm i -g webpack

//Browsersync
npm i -g browser-sync

// Debug log输出
npm i debug

// 多项目不同node自动切换
npm install -g avn avn-nvm avn-n
# https://github.com/wbyoung/avn

git 工具

编辑器IDE

尝试工作流工具/手架

常用工具列表：

模拟数据/请求工具

css 工具

设计

正则

服务器

抓包/数据拦截

图片处理

页面性能分析工具

火狐浏览器插件

  • 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) 中文版,点我 （除了最后一个网上可能找不到中文版）

谷歌浏览器插件

其他软件工具

其他一些网上工具

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)

帮助文档

WebStorm配置

VsCode配置

Sublime Text 3配置

webpack常用插件

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

作者 @黑色技术 创建时间: 2015 年 3月 15日 更新时间: 2020 年 1月 18日

About

个人前端工程师开发工具记录

Resources

Readme
Activity

Stars

10 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages