一、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、什么是环境变量
环境变量就是操作系统提供的系统级别用于存储变量的地方，分为系统变量和用户变量，系统变量指的是所用当前系统用户共享的变量，自己的电脑一般只有一个用户，建议将自己配置的环境变量放在用户变量中，用户变量比较干净，环境变量的变量名是不区分大小写的，变量间运行相互引用。
3、windows下用nvm 安装node
如果你已经单独安装了node，建议先卸载。
1. nvm 下载
nvm 的下载地址：https://github.com/coreybutler/nvm-windows/releases 。
选择第一个 nvm-noinstall.zip ，然后解压在系统盘（一般开发相关的文件我都放C盘，但是放别的盘也是可以的）。我放的目录路径是C:devnvm。解压出来的文件有： elevate.cmd elevate.vbs install.cmd LICENSE nvm.exe
2. nvm 安装
双击 install.cmd ，是以控制台形式显示的，第一下直接按回车，然后会在C盘根目录产生settings.txt，把这个文件放进刚刚解压的那个目录，然后修改settings.txt内容，改成下面那样： root: C:devnvm
path: C:devnodejs
arch: 64
proxy: none
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
但是有些人很不幸，这个方法行不通，因为打开 install.cmd按下回车后，显示拒绝访问注册表路径，并弹出一个settings.txt。这时候，你只要淡定地叉掉那个文本以及控制台，然后在刚刚的目录里新建一个文件settings.txt，最后把上面的内容复制进去就可以了。
root ： nvm的存放地址
path ： 存放指向node版本的快捷方式，使用nvm的过程中会自动生成。一般写的时候与nvm同级。
arch ： 电脑系统是64位就写64,32位就写32
proxy ： 代理
3. nvm 配置
以控制台方法执行成功的，在环境变量里会自动配置了 NVM_HOME 和 NVM_SYMLINK ，这时候只要修改相应的路径就行了。
直接创建settings文件的可以在环境变量中用户变量里创建 NVM_HOME 和 NVM_SYMLINK，并添加路径
NVM_HOME： C:devnvm
NVM_SYMLINK ： C:devnodejs
在PATH里加上;%NVM_HOME%;%NVM_SYMLINK%;。 一键控制台install的还要检查 环境变量 PATH 上的路径有没有添加C:devnvm以及C:devnodejs,有的话就删掉。
4. 检测安装结果
打开控制台，输入：nvm -v,若是出现版本信息，则安装。若报错，那就重新把步骤再捋一遍。
检查环境变量是否配置成功：可以在控制台输入：set [环境变量名]，查看路径是否填写错误
5. 使用node
控制台下载 => 输入：nvm install [版本号]，下载最新版的可以直接输nvm install latest
下载完成后，在控制台输入：nvm use [版本号]。即使用这个版本号的node了。在use后，上面所说的nodejs文件夹就自动生成了。
二、npm的安装
首先 npm是什么？
npm有两层含义
第一是npm这个开源的模块登记和管理系统，也就是这个站点：https://www.npmjs.com。
第二个指的是 nodejs package manager 也就是nodejs的包管理工具。我们主要说的就是这一个。 在每个版本的nodejs中，都会自带npm，为了统一起见，我们安装一个全局的npm工具，这个操作很有必要，因为我们需要安装一些全局的其他包，不会因为切换node版本造成原来下载过的包不可用。
首先我们进入命令模式，输入 npm config set prefix C:devnvmnpm`
npm config set cache C:devnvmnpm-cache
回车，这是在配置npm的全局安装路径，然后在用户文件夹下会生成一个.npmrc的文件，用记事本打开后可以看到如下内容：
prefix=C:Developnvmnpm
cache=C:Developnvmnpm-cache
然后继续在命令中输入： npm install npm -g 回车后会发现正在下载npm包，在C:devnvmnpm目录中可以看到下载中的文件，以后我们只要用npm安装包的时候加上 -g 就可以把包安装在我们刚刚配置的全局路径下了。
我们为这个npm配置环境变量： 变量名为：NPM_HOME，变量值为 ：C:devnvmnpm
在Path的最前面添加;%NPM_HOME%，注意了，这个一定要添加在 %NVM_SYMLINK%之前，所以我们直接把它放到Path的最前面
最后我们新打开一个命令窗口，输入npm -v ,此时我们使用的就是我们统一下载的npm包了。
同样的我们还可以安装cnpm工具，它是中国版的npm镜像库，地址在这里：https://cnpmjs.org/，也是npm官方的一个拷贝，因为我们和外界有一堵墙隔着，所以用这个国内的比较快，淘宝也弄了一个和npm一样的镜像库，http://npm.taobao.org/，具体怎么使用可以去这个网站看使用介绍，它和官方的npm每隔10分钟同步一次。安装方式：
npm install -g cnpm --registry=http://r.cnpmjs.org 或者用淘宝的npm install -g cnpm --registry=https://registry.npm.taoba.org 安装好了cnpm后，直接执行cnpm install 包名比如：cnpm install bower -g 就可以了。-g只是为了把包安装在全局路径下。如果不全局安装，也可以在当前目录中安装，不用-g就可以了。
npm常用操作
https://npmjs.com 安装一个包，npm install package_name 初始化操作，给项目添加一个配置文件，可以用npm init, 如果想使用默认的就用npm init --yes自动生成package.json默认配置。 卸载一个包，npm uninstall package_name
dependencies节点中 –save-dev 项目依赖分两种，一个就是普通的项目依赖比如bootstrap，还有一
中只是开发阶段需要用的，这种属于开发依赖比如gulp,开发依赖最终
记录在devDependencies节点里面 npm install xxx -g (全局安装包)
npm 查看包文件版本
npm view angular versions
三、nrm 的安装
什么是nrm？ nrm就是npm registry manager 也就是npm的镜像源管理工具，有时候国外资源太慢，那么我们可以用这个来切换镜像源。 我们只要通过这个命令: npm install -g nrm 就可以实现安装。 注意-g可以直接放到install的后面，我们以后也最好这样用，因为这样用，我们可以在cmd中上下箭头切换最近命令的时候，容易修改，更方便操作。安装完成后，我们就可以使用了。
命令：nrm ls 用于展示所有可切换的镜像地址 命令：nrm use cnpm 我们这样就可以直接切换到cnpm上了。当然也可以按照上面罗列的其他内容进行切换。
四、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常用命令
1、初始化一个Bower的配置文件 --- $ bower init
2、安装一个包 --- $ bower install bootstrap
3、GitHub shorthand --- $ bower install desandro/masonry
4、Git endpoint --- $ bower install git://github.com/user/package.git
5、URL --- $ bower install http://example.com/script.js
6、安装一个包并将其添加到配置文件 --- $ bower install bootstrap --save
7、卸载一个包 --- $ bower uninstall bootstrap
8、更新所有的包 --- $ bower update
Bower配置文件
项目根目录
用户主目录
五、gulp
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吧！
2、首先确保你已经正确安装了NODE环境，然后以全局方式安装gulp
- npm install -g gulp 全局安装完gulp后，还需要在每个要使用gulp的项目中单独安装一次，把目录切换到你的项目文件夹中，然后再命令行中执行
- npm install gulp 如果想在安装的时候吧gulp写进项目package.json文件的依赖中，则可以加上--save-dev gulp
- npm install --save-dev gulp 这样就完成了gulp的安装，接下来就可以在项目中应用gulp了
http://www.ydcss.com/archives/18 详细教程 http://zlwis.me/2016/02/24/在gulp中使用browsersync/ browsersync使用 gulp是引入开发过程中的一些小工具，生产模式不需要gulp http://www.gulpjs.com.cn/ 具体使用请看这个网站教程
3、在自己的项目目录下再安装一下gulp,并且写进package.json文件中，在项目目录下没有package.json需要先使用npm init --yes 添加package.json，然后在项目目录下shift 鼠标右击在此文件夹下打开命令窗口输入：npm install --save-dev gulp 。 在项目中打开命令窗口执行npm install,会自动去下载package.json里的依赖包。
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
4、新建gulpfile.js文件（重要）
是位于项目根目录的普通js文件
（其实将gulpfile.js放入其他文件夹下亦可）。
它大概是这样一个js文件
（更多插件配置请[查看这里](http://www.ydcss.com/archives/tag/gulp)）：
在gulpfile中写入我们需要做的任务，并且需要安装对应的插件，下面几个是
常用插件安装命令
Less编译成css：npm install gulp-less --save-dev
合并：npm install gulp-concat --save-dev
Js混淆：npm install gulp-uglify --save-dev
Css压缩：npm install gulp-cssnano --save-dev
Html压缩：npm install gulp-htmlmin --save-dev
浏览器同步刷新：npm install browser-sync --save-dev
- 编译 Less：gulp-less
- 编译 Jade: gulp-jade
- 创建本地服务器：gulp-connect
- 合并文件：gulp-concat
- 最小化 js 文件：gulp-uglify
- 重命名文件：gulp-rename
- 最小化 css 文件：gulp-minify-css
- 压缩html文件 gulp-minify-html
- 最小化图像：gulp-imagemin
5、运行gulp
说明：命令提示符执行gulp 任务名称；
编译less：命令提示符执行gulp testLess；
当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]。
6、在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"
