能提升你前端工作效率的工具总结

一. nvm

node版本管理工具

1.1 nvm简介

目前主流的node版本管理工具有两种，nvm和n。两者差异挺大的，具体分析可以参考《管理 node 版本，选择 nvm 还是 n？》
总的来说，nvm有点类似于 Python 的 virtualenv 或者 Ruby 的 rvm，每个node版本的模块都会被安装在各自版本的沙箱里面（因此切换版本后模块需重新安装），因此考虑到需要时常对node版本进行切换测试兼容性和一些模块对node版本的限制，经常选用nvm作为管理工具。

1.2 安装

下面简要介绍下安装及使用
主要介绍ubutu下及mac下的安装(linux可以参照),windows系统的话可以参考windows

• ubuntu下的安装

sudo apt-get update
sudo apt-get install build-essential libssl-dev
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile

• mac下安装

brew install nvm
$ echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile
$ source ~/.bash_profile

1.3 常用命令

nvm install <version> 
## 安装指定版本，可模糊安装，如：安装v4.4.0，既可nvm install v4.4.0，又可nvm install 4.4

nvm uninstall <version> 
## 删除已安装的指定版本，语法与install类似

nvm use <version> 
## 切换使用指定的版本node

nvm ls
## 列出所有安装的版本

nvm ls-remote 
## 列出所以远程服务器的版本（官方node version list）

nvm current 
## 显示当前的版本

nvm alias <name> <version>
## 给不同的版本号添加别名

nvm unalias <name> 
## 删除已定义的别名

nvm reinstall-packages <version>
## 在当前版本node环境下，重新全局安装指定版本号的npm包

如：

nvm ls-remote
nvm install 8.6.4
nvm use 6.10.3
nvm current

1.4 使用 .nvmrc 文件配置项目所使用的 node 版本

如果你的默认 node 版本（通过 nvm alias 命令设置的）与项目所需的版本不同，则可在项目根目录或其任意父级目录中创建 .nvmrc 文件，在文件中指定使用的 node 版本号，例如：

cd <项目根目录>  #进入项目根目录
echo 4 > .nvmrc #添加 .nvmrc 文件
nvm use #无需指定版本号，会自动使用 .nvmrc 文件中配置的版本
node -v #查看 node 是否切换为对应版本

二. nrm

2.1 前言

npm 源管理工具 nrm

有些时候用 npm安装相关的包时经常卡顿甚至安装不了，出现这种情况是因为相关的源不在国内， 为了解决这一问题，进程换源。先来看看npm相关的操作：

• 查看npm源地址

$ npm config list
metrics-registry = "https://registry.npmjs.org/"

国内常用的镜像地址如淘宝npm：https://registry.npm.taobao.org/

修改registry地址

npm set registry https://registry.npm.taobao.org/

命令删源

npm config rm registry

上面的增删改，是不是很麻烦，用上nrm就会方便很多。

nrm是专门用来管理和快速切换私人配置的registry

2.2 安装

npm install nrm -g --save

2.3 使用

• 查看默认配置，带*号即为当前使用的配置

$ nrm ls
* npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
  eu ----- http://registry.npmjs.eu/
  au ----- http://registry.npmjs.org.au/
  sl ----- http://npm.strongloop.com/
  nj ----- https://registry.nodejitsu.com/

• 切换

 //switch registry to cnpm
$ nrm use cnpm
    Registry has been set to: http://r.cnpmjs.org/

• 查看当前使用的是哪个源

nrm current

• 添加私有源

nrm add qihoo http://registry.npm.360.org

• 测试源的响应时间

nrm test

• 删npm源配置

nrm del qihoo

• 其它命令

 // show help
nrm help
// show all registries
nrm list 
// go to a registry home page
nrm home 

三 live-server

live-server插件实现了——修改文件浏览器自动刷新；浏览器自动打开项目；本地开发搭建临时的服务。

3.1 全局安装

npm install -g live-server

3.2 基本使用方法

在项目根目录使用命令

live-server

3.3 放在package.json的scripts下的server中

"scripts": {
  "server": "live-server ./ --port=8081"
}

运行

npm run server

3.4 结合node使用

var liveServer = require("live-server");

var params = {
    port: 8181, // Set the server port. Defaults to 8080. 
    host: "0.0.0.0", // Set the address to bind to. Defaults to 0.0.0.0 or process.env.IP. 
    root: "/public", // Set root directory that's being served. Defaults to cwd. 
    open: false, // When false, it won't load your browser by default. 
    ignore: 'scss,my/templates', // comma-separated string for paths to ignore 
    file: "index.html", // When set, serve this file for every 404 (useful for single-page applications) 
    wait: 1000, // Waits for all changes, before reloading. Defaults to 0 sec. 
    mount: [['/components', './node_modules']], // Mount a directory to a route. 
    logLevel: 2, // 0 = errors only, 1 = some, 2 = lots 
    middleware: [function(req, res, next) { next(); }] // Takes an array of Connect-compatible middleware that are injected into the server middleware stack 
};
liveServer.start(params);

四. browser-sync

Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。

详细使用说明请看官方文档

我已经开通了我个人网站, 欢迎访问！