前端-nodejs的配置及其安装前端浏览器实时刷新工具

请注意,本文编写于 596 天前,最后修改于 18 天前,其中某些信息可能已经过时。

npm浏览器实时刷新工具browser-sync

安装node.js

nodejs下载地址 https://nodejs.org/en/download/

下载你的操作系统对应的版本,我下载的是LTS版,代表为长期稳定版本,对项目稳定十分友好。

  • 下载得到.msi安装文件,直接点击下一步下一步并勾选PATH安装,并记住安装的路径
  • 进入安装路径新建2个文件夹 node_global 和 node_cache
    创建文件夹.png
    创建文件夹.png
  • 打开dos命令窗口输入
# 设置nodejs缓存位置
C:\Users\qfmx>npm config set cache "D:\DEVELOP\nodejs\node_cache"
# 设置nodejs全局模块位置
C:\Users\qfmx>npm config set prefix "D:\DEVELOP\nodejs\node_global"
# 全局安装cnpm,配置淘宝镜像
C:\Users\qfmx>npm install -g cnpm --registry=https://registry.npm.taobao.org

dos输入.png
dos输入.png

  • 配置环境变量,不明白的伙伴可以参照其他博客配置,这里只是简单的配置
变量名:NODE_PATH
变量值:C:\Program Files\nodejs\node_global\node_modules

变量名:PATH    cnpm命令也存放在内
变量值:;C:\Program Files\nodejs\node_global

环境变量设置.png
环境变量设置.png

Path后添加.png
Path后添加.png

  • 测试安装

npm install express -g # -g是全局安装的意思

  • npm安装浏览器实时刷新工具

npm install browser-sync -g

安装.png
安装.png

  • 等待进度完成
  • 切换到项目目录
# --file后面js/css/html文件的路劲
browser-sync start --server --files "index.html"
# 即将弹出浏览器,ctrl + s保存你的文件后将实现实时刷新功能

使用与测试.png
使用与测试.png