node环境配置

1、什么是node？

它不是JS文件，也不是JS框架，而是Server side JavaScript runtime，当服务端的一个JS文件运行时，会被NODE拦截，在NODE中运行JS代码。JS由ES（ECMAScript），DOM，BOM 组成，目前运行在浏览器内核中，NODE中只能运行ECMAScript，无法使用DOM，BOM。

NODE就是一个JS运行环境。主要用于开发WEB应用程序开发，很多前端开发的工具都是基于NODE这个平台，所有的工具就相当于一些软件。

2、什么是环境变量

环境变量就是操作系统提供的系统级别用于存储变量的地方，分为系统变量和用户变量，系统变量指的是所用当前系统用户共享的变量，自己的电脑一般只有一个用户，建议将自己配置的环境变量放在用户变量中，用户变量比较干净，环境变量的变量名是不区分大小写的，变量间运行相互引用

• 特殊值：

1， PATH变量（不区分大小写）， PATH 相当于一个路径的引用，只要添加到PATH变量中的路径，都可以在任何目录下搜索
2，命令行，可以用来执行当前目录下的文件

Node.js是一个轻内核（本身没有什么功能）的东东，所有的功能都要功能包提供 node官方提供了一些最基础的包。

3、NVM（Node Version Manager）

NODE两种安装方式：
1:msi方式安装，
2：nvm方式安装
因为Node更新比较快，不建议使用.msi安装包安装，而是使用nvm来管理node版本，方便切换、使用不同版本的NODE。

windows 环境下载地址：https://github.com/coreybutler/nvm-windows/releases， 我们选择第一个：nvm-noinstall.zip 下载完成后解压到一个地方，比如: C:\develop\nvm 里面的文件列表是这样的：elevate.cmd、elevate.vbs、install.cmd、LICENSE、nvm.exe。然后完成以下操作：

1，双击 install.cmd ,(win10需要右击用管理员权限打开)，然后会让你输入”压缩文件解压或拷贝到的一个绝对路径” ,输入C:\develop\nvm路径，此时弹出一个记事本窗口，修改里面的内容，如下

root: C:\develop\nvm
path: C:\develop\nodejs(注意中间没有点） arch: 64(默认是64位)
proxy: none

2，我们开始配置环境变量了，因为刚刚点击了install.cmd的文件，那么会在环境变量的系统变量中，生成两个环境变量：NVM_HOME 和 NVM_SYMLINK 。我们将这两个环境变量删掉。我们还会发现，在Path中也会自动添加上C:\dev\nvm;或者是C:\dev\nodejs，如果有的话，把他们删掉，没有的话更好。

3，在用户变量中新建三个环境变量，分别为：

NVM_HOME=C:\dev\nvm
NVM_SYMLINK=C:\dev\nodejs
Path=%NVM_HOME%;%NVM_SYMLINK%

4，打开一个cmd窗口 输入命令：nvm ，那么我们会看到当前关于nvm的所有信息。 输入命令：nvm ls ，打印出电脑上已经安装过的几个NODE的版本 输入命令：nvm use 版本号 /32 继续输入命令：nvm install (默认是64位) 如果网络畅通，我们会看到正在下载的提示，下载完成后 会让你use那个最新的node版本。 输入命令：node -v,打印正在使用的NODE版本号

nvm v // 查看版本 => 1.1.1

nvm install latest // 下载最新的 node 版本 v7.2.0

nvm install 4.4.4 // 安装不同版本

nvm install 6.2.0 32 // 默认是64位，32位需指定

nvm uninstall 6.2.0 #卸载对应的版本

4、npm（Node Package Manager）

在每个版本的nodejs中，都会自带npm，为了统一起见，我们安装一个全局的npm工具，这个操作很有必要，因为我们需要安装一些全局的其他包，不会因为切换node版本造成原来下载过的包不可用。

1、我们进入命令模式，输入 npm config set prefix “C:\develop\nvm\npm” 回车，这是在配置npm的全局安装路径，然后在用户文件夹下会生成一个.npmrc的文件（或者手动在用户目录下建一个这个文件），用记事本打开，其内容要与下面一致：
cache=C:\develop\nvm\npm-cache
prefix=C:\develop\nvm\npm

2、继续在命令中输入： npm install npm -g 回车后会发现正在下载npm包，在C:\develop\nvm\npm目录中可以看到下载中的文件，以后我们只要用npm安装包的时候加上 -g(global) 就可以把包安装在我们刚刚配置的全局路径下了。

3、为这个npm配置环境变量：在用户变量中添加
变量名为：NPM_HOME， 变量值为 ：C:\dev\nvm\npm 在Path的最前面添加;%NPM_HOME%,(注意了，这个一定要添加在 %NVM_SYMLINK%之前，所以我们直接把它放到Path的最前面)

4、最后我们新打开一个命令窗口，输入npm -v ,此时我们使用的就是我们统一下载的npm包了。

4.1 npm常用操作

官网https://npmjs.com

• 安装一个包，npm install package_name

• 安装一个包到项目本地，必须要联网

• 安装完成过后项目根目录下会多一个node_modules文件夹，所有的下载下来的包全部在里面

• 初始化操作，npm init

• 给项目添加一个配置文件，生成package.json默认配置。

• 添加项目依赖，npm install package_name --save/–save-dev

• 项目依赖分两种，一个就是普通的项目依赖比如bootstrap，

• 还用一种只是开发阶段需要用的，这种属于开发依赖比如gulp，

• 开发依赖最终记录在package.json配置文件devDependencies节点里面 为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可

–save就是将我们安装的包名字和包版本记录到配置文件中的dependencies节点中

卸载一个包，npm uninstall package_name --save

• npm install xxx -g(全局安装包)

• 如果你安装的是一个工具，工具要在每一个地方都能用，这种情况下一般全局安装。

npm install moduleName 命令

1. 安装模块到项目node_modules目录下。 2. 不会将模块依赖写入devDependencies或dependencies 节点。 3. 运行 npm install 初始化项目时不会下载模块。

npm install -g moduleName 命令

1. 安装模块到全局，不会在项目node_modules目录中保存模块包。 2. 不会将模块依赖写入devDependencies或dependencies 节点。 3. 运行 npm install 初始化项目时不会下载模块。

npm install -save moduleName 命令

1. 安装模块到项目node_modules目录下。 2. 会将模块依赖写入dependencies 节点。 3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。 4. 运行npm install --production或者注明NODE_ENV变量值为production时，会自动下载模块到node_modules目录中。

npm install -save-dev moduleName 命令

1. 安装模块到项目node_modules目录下。 2. 会将模块依赖写入devDependencies 节点。 3. 运行 npm install 初始化项目时，会将模块下载到项目目录下。 4. 运行npm install --production或者注明NODE_ENV变量值为production时，不会自动下载模块到node_modules目录中。

总结

devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

5、bower（web应用程序依赖项管理工具）

官网http://bower.io/ Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.
Bower就是用来管理项目中所有的依赖，主要用于Web页面开发时使用的包管理，比如jquery，bootstrap

• Bower常用命令

$ # 初始化一个Bower的配置文件

$ bower init

$ # 安装一个包

$ bower install bootstrap

$ # GitHub shorthand

$ bower install desandro/masonry

$ # Git endpoint

$ bower install git://github.com/user/package.git

$ # URL

$ bower install http://example.com/script.js

$ # 安装一个包并将其添加到配置文件

$ bower install bootstrap --save

$ # 卸载一个包

$ bower uninstall bootstrap

$ # 更新所有的包

$ bower update

• Bower配置文件

• 项目根目录

• 用户主目录

####6、gulp

6.1什么是gulp？

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。 gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

• gulp是引入开发过程中的一些小工具，生产模式不需要gulp

本示例以gulp-less为例（将less编译成css的gulp插件）展示gulp的常规用法，只要我们学会使用一个gulp插件后，其他插件就差看看其帮助文档了。让我们一起来学习gulp吧！ ^_

6.2 gulp的全局安装

首先确保你已经正确安装了NODE环境，然后以全局方式安装gulp

• npm install -g gulp 全局安装完gulp后，还需要在每个要使用gulp的项目中单独安装一次，把目录切换到你的项目文件夹中，然后再命令行中执行
• npm install gulp 如果想在安装的时候吧gulp写进项目package.json文件的依赖中，则可以加上–save-dev gulp
• npm install --save-dev gulp 这样就完成了gulp的安装，接下来就可以在项目中应用gulp了

gulp常用地址：

gulp官方网址：http://gulpjs.com gulp插件地址：http://gulpjs.com/plugins gulp 官方API：https://github.com/gulpjs/gulp/blob/master/docs/API.md gulp 中文API：http://www.ydcss.com/archives/424

在自己的项目目录下再安装一下gulp,并且写进package.json文件中，在项目目录下没有package.json需要先使用npm init --yes 添加package.json，然后在项目目录下shit+鼠标右击在此文件夹下打开命令窗口输入：npm install --save-dev gulp 。 在项目中打开命令窗口执行npm install,会自动去下载package.json里的依赖包。
新建gulpfile.js文件（重要）
是位于项目根目录的普通js文件
（其实将gulpfile.js放入其他文件夹下亦可）。
它大概是这样一个js文件

（更多插件配置请查看这里）：

在gulpfile中写入我们需要做的任务，并且需要安装对应的插件，下面几个是常用插件

//npm install gulp-less --save-dev

//npm install gulp-concat --save-dev

//npm install gulp-uglify --save-dev

//npm install gulp-cssnano --save-dev

//npm install gulp-htmlmin --save-dev

//npm install browser-sync --save-dev

运行gulp

说明：命令提示符执行gulp 任务名称；

编译less：命令提示符执行gulp testLess；

当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。

6.3在Gulp中使用BrowserSync

BrowserSync可以同时同步刷新多个浏览器，更神奇的是你在一个浏览器中滚动页面、点击按钮、输入框中输入信息等用户行为也会同步到每个浏览器中。

安装browser-sync模块

• npm install browser-sync -g

命令行直接使用

• browser-sync start --server --files “css/*.css”

使用上面命令会开启一个迷你服务器，自动帮你打开浏览器，默认地址localhost:3000，默认打开index.html，如果没有，需要手动加上你要打开的页面，如localhost:3000/test.html。

通常你不会需要默认的地址，所以需要使用代理模式：

• browser-sync start --proxy “localhost:8080” --files “css/*.css”

![

![

![

![0DT4]4J7ZK4LS7TM)SF2S`Q.png](http://upload-images.jianshu.io/upload_images/4614755-62f3f0bd8a5c5318.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

]L085`RBM.png](http://upload-images.jianshu.io/upload_images/4614755-262ef0a6e7d9739f.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

](http://upload-images.jianshu.io/upload_images/4614755-789ff21556e69078.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

]@_MJSENPYOU0GY)FBVEE}1.png](http://upload-images.jianshu.io/upload_images/4614755-f3938ae10ca37903.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)

7、git

7.1什么是git
它是一个源代码管理工具，在一个项目中，凡是由开发人员编写的都算是源代码，源代码有必要管理起来，让源代码可以被追溯，主要记录每次变更了什么，谁主导这次变化。人为的维护比较麻烦，GIT是Linux之父当年为了维护管理Linux的源代码写的一个工具

Git 之前 很多使用 svn vss tfs hs …

• 官网 https://guides.github.com/

7.2安装git

在Windows上安装git

######下载地址https://git-for-windows.github.io

然后按默认选项安装即可。

• 创建项目目录

cd 当前项目目录

git init // 初始化一个本地的仓库

就是在本地文件夹中添加了一个.git的文件夹用于记录所有的项目变更信息

• 查看本地仓储的变更状态

git status

用于查看本地仓储的状态

第一次查看，显示的是一坨没有被跟踪的文件

git status -s // -s 是输出简要的变更日志

• 添加本地暂存（托管）文件

git add --all / git add .

所有添加跟踪

类似于node_modules这种性质的文件是不应该被跟踪

• 添加本地GIT忽略清单文件

在代码库文件夹的根目录添加一个.gitignore文件

此文件用于说明忽略的文件有哪些

• 提交被托管的文件变化到本地仓储

git commit -m ‘需要说明的信息如：第一次提交’

将本地的变化提交的本地的仓库文件夹归档

一般在有了一个小单元的整体变化后再提交

• 对比差异

git diff

可以用于对比当前状态和版本库中状态的变化

• 提交日志

git log

可以查看提交日志

• 回归到指定版本

git reset --hard

• 为仓储添加远端（服务器端）地址

• 将本地仓储的提交记录推送到远端的master分支

• 拉取远端master分支的更新记录到本地

• 回归到指定版本

安装完成后，在开始菜单里找到“Git”->“Git Bash”，蹦出一个类似命令行窗口的东西，就说明Git安装成功！

安装完成后，还需要最后一步设置，在命令行输入：

$ git config --global user.name “Your Name”

$ git config --global user.email "email@example.com"

因为Git是分布式版本控制系统，所以，每个机器都必须自报家门：你的名字和Email地址。你也许会担心，如果有人故意冒充别人怎么办？这个不必担心，首先我们相信大家都是善良无知的群众，其次，真的有冒充的也是有办法可查的。

注意git config命令的–global参数，用了这个参数，表示你这台机器上所有的Git仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。

生成一个新的SSH密钥

打开 Git Bash，输入如下命令，然后连续按三个回车即可,

ssh-keygen -t rsa -C "your_email@example.com"

将SSH公钥添加到GitHub账户,复制SSH公钥的完整内容（/C/Users/Administrator/.ssh/id_rsa.pub）进入GitHub添加进去。

测试连接

打开 Git Bash 输入：

ssh -T git@github.com

在项目目录下（第一次提交代码）

git init git add --all

git commit -m “第一次提交”

git remote add origin https://github.com/jilanlan/node-demo.git

git push -u origin master

如果执行git remote add origin https://github.com/Flowerowl/stumansys.git， 出现错误：fatal: remote origin already exists 则执行以下语句：git remote rm origin 再往后执行git remote add origin https://github.com/Flowerowl/stumansys.git 即可。

在执行git push origin master时，报错：error:failed to push som refs to…则执行以下语句：git pull origin master 先把远程服务器github上面的文件拉先来，再push 上去。

提交完代码后，我们可以在线编辑README文件，然后我们拉取到本地，

git pull origin master

拉取完后本地就和线上内容同步了。

安装教程http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a000/

8、github

github不是一个工具，是一个GIT服务提供商