node.js的安装配置——前端的配置

最近琢磨了以下node.js的安装,npm的配置,使用gulp watch监听index.html文件的修改,利用服务器打开网页。

打开自己写的网页不要本地双击打开,这样打开的网址是file:///E:/code/test03/index.html,本地的file打开。最好使用服务器的ip地址打开http://192.168.86.1:3000/,之前我就是范了这样错误。

1.官网下载安装包,安装一路点击next,安装完成。

node.js的安装配置——前端的配置        node.js的安装配置——前端的配置

2.检测path环境是否配置了node.js

——>命令行cmd——path

node.js的安装配置——前端的配置

3.检查node.js版本,npm版本

——>命令行cmd——node -v  命令行 cmd——npm -v

node.js的安装配置——前端的配置

4.npm 配置全局变量gulp

——>命令行c:/program files/nodejs——npm install -g gulp

node.js的安装配置——前端的配置

配置成功后C:\Users\lei\AppData\Roaming\npm文件下会有gulp的相关文档,C:\Users\lei\AppData\Roaming\npm-cache也有相关的gulp文档

注意:

如果安装失败,可以考虑npm淘宝镜像安装

1)百度关键字:淘宝npm镜像

node.js的安装配置——前端的配置

2)输入$ npm install -g cnpm --registry=https://registry.npm.taobao.org,成功后,npm 配置全局变量gulp,输入: $ npm install -g gulp。这样成功的概率会大一点

node.js的安装配置——前端的配置

5.安装git

官网下载,一路点击next安装,默认安装路径

node.js的安装配置——前端的配置       node.js的安装配置——前端的配置

检测是否安装成功,鼠标点击右键,会有git bash here 和git gui here,桌面也会有git bash快捷键

node.js的安装配置——前端的配置       node.js的安装配置——前端的配置

6.利用gulp watch监听文档的变化,项目经过服务器打开

在项目的文件夹D:\Code\project里,鼠标右键git bash,命令行git init 创建空仓库,project项目里出现一个.git文件夹

node.js的安装配置——前端的配置     node.js的安装配置——前端的配置

添加package.json和gulpfile.js的文档,下面仅供参考。具体如何添加请百度。要有index.html文档,才能自动打开网页。

node.js的安装配置——前端的配置            node.js的安装配置——前端的配置

node.js的安装配置——前端的配置

鼠标右键git bash ,命令行npm install(淘宝npm镜像使用命令行cnpm install),项目安装npm。project项目下会出现node_modules文件夹。

node.js的安装配置——前端的配置         node.js的安装配置——前端的配置

鼠标右键git bash,命令行gulp watch,index.html网页会自动打开。

node.js的安装配置——前端的配置         node.js的安装配置——前端的配置

当更新index.html文档的时候,保存后,浏览器会自动刷新文档更新。

除了监听.html文档外,还可以监听.css文档,根据修改gulpfile.js文档来实现。

上一篇:[Node.js]001.安装与环境配置


下一篇:CSS几个要点补充