windows下node和git和gulp的配置总结

今天来总结下我这次安装的经验,期待看到的同学们可以少走点弯路

node

Node.js简介

简单的说Node.js就是运行在服务端的JavaScript,Node.js是一个基于Chrome V8引擎的JavaScript运行环境;Node.js使用了一个事件驱动/非阻塞式I/O的模型,使其轻量又高效;Node.js的包管理器npm是全球最大的开源库生态系统

下载Node.js

打开官网下载链接:https://nodejs.org/en/download/ 下载对应你系统的Node.js版本;我这里下载的是node-v6.9.2-x64.msi,如下图：

开始安装

下载完成后,双击"node-v6.9.2-x64.msi"开始安装Node.js

点击Next按钮

勾选复选框,点击Next按钮

修改好目录后，点击Next按钮


安装完后点击Finish按钮完成安装

至此Node.js已经安装完成,可以先进行下简单的测试安装是否成功了,后面还要进行环境配置

在键盘按下win+R键,输入cmd,然后回车,打开cmd窗口


安装完后的目录如下图所示:

此处说明下:新版的Node.js已自带npm,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装/卸载Node.js需要的东西

环境配置

说明:这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径;之所以要配置,是因为以后在执行类似:npm install express -g的安装语句时会将安装的模块安装到C:Users用户名AppDataRoamingnpm路径中,占C盘空间;例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹D:Developnodejs下创建两个文件夹node_global及node_cache如下图:

创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

接下来设置环境变量,关闭cmd窗口,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

进入环境变量对话框,在系统变量下新建NODE_PATH,输入D:Developnodejsnode_globalnode_modules,将用户变量下的Path修改为D:Developnodejsnode_global

node测试

配置完后安装个module测试下,我们就安装最常用的express模块,打开cmd窗口,输入如下命令进行模块的全局安装：

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

git

git下载

从git官网下载一个git安装包,官网下载地址 http://www.git-scm.com/download/

双击安装程序进入欢迎界面点击Next

阅读协议,点击Next

git安装

选择安装位置,点击Next

选择安装组件:这里可以使用默认选项,点击Next

图标组件(Additional icons):选择是否创建快速启动图标和桌面快捷方式

桌面浏览(Windows Explorer integration)使用Git Bash方式/shell方式打开桌面程序

关联配置文件:是否关联git配置文件,该配置文件主要显示文本编辑器样式

关联shell脚本文件:是否关联Bash命令执行脚本文件

使用TrueType编码:在命令行中是否使用TrueType编码,该编码是微软和苹果公司制定的通用编码

开始菜单快捷方式目录,点击Next

设置环境,选择使用什么样的命令行工具,一般情况我们使用默认配置,使用Git Bash,点击Next

Git自带:使用Git自带的Git Bash命令行工具

系统自带CMD:使用windows系统的命令行工具

二者都有:上面二者同时配置,但是注意,这样会将windows中的find.exe和sort.exe工具覆盖,如果不懂这些尽量不要选择

选择换行格式,点击Next

检查出windows格式转换为unix格式:将windows格式的换行转为unix格式的换行在进行提交

检查出原来格式转换为unix格式:不管什么格式的,一律转换为unix格式的换行在进行提交

不进行格式转换:不进行转换,检查出什么格式提交什么格式

配置Git bash终端仿真器,点击Next

使用MinTTY终端

使用windows默认的命令行

性能配置,是否启用文件系统缓存,点击Next

开始安装

安装完成,点击Finish

环境变量配置

同上node环境变量配置,“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”

git 目录下的bin(如 C:Program Files (x86)Gitbin)添加到 PATH 环境变量

同上node,选择 PATH——编辑,将 bin 的路径(C:Program Files (x86)Gitbin)添加到变量值后面

测试

打开git bash输入git --version,只要显示版本就说明本地安装成功了

以后就可以在cmd和Git Bash中使用 git 命令了

绑定远程仓库

打开任意文件夹,右键选择git bash here

在控制台输入命令：

git config --global user.name "yourname"
git config --global user.email "youremail"

ssh-keygen -t rsa -C "youremail"

这样在git下的.ssh文件夹里就出现了私钥和公钥两个文件

将SSH key设置到GitHub中

打开https://github.com/ 网页注册一个属于自己github账号,登陆,在个人设置中心把本地公钥添加到SSH key

自己定义Title,Key就是将文件里面的内容全部拷贝过来

测试是否配置ssh key成功,在git bash命令行下输入ssh -T git@github.com;如果刚刚在生成ssh密钥时有输入密码此处会要求输入密码,输入正确才会连接成功;另外在以后的项目push中也会要求输入该密码

至此,基本的git配置已完成

gulp

gulp简介

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成

gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 JavaScript/coffee/sass/less/html/image/css 等文件的的测试/检查/合并/压缩/格式化/浏览器自动刷新/部署文件生成,并监听文件在改动后重复指定的这些步骤,在实现上，她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出直接变成后一级的输入,使得在操作上非常简单

gulp安装

gulp就是通过NPM安装的,所以首先要把你的node升级到最新稳定版本,npm也是

先进行全局安装,指令是:npm install -g gulp;全局安装gulp目的是为了通过她执行gulp任务;查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装

2.在项目目录下新建package.json文件,package.json是存放在项目根目录的基于nodejs项目必不可少的配置文件，是项目要用到的一些配置,比如npm版本/node版本,以及需要哪些gulp插件等

package.json文件基本配置如下:

当然我们可以手动新建这个配置文件,但作为一名有志青年,我们应该使用更为效率的方法:命令提示符执行npm init

查看package.json帮助文档,命令提示符执行cnpm help package.json

特别注意:package.json是一个普通json文件,所以不能添加任何注释

本地安装gulp插件

安装:定位目录命令后提示符执行

npm install --save-dev

本示例以gulp-less为例(编译less文件),命令提示符执行

npm install gulp-less --save-dev;

将会安装在node_modules的gulp-less目录下,该目录下有一个gulp-less的使用帮助文档README.md；

为了能正常使用,我们还得本地安装gulp

npm install gulp --save-dev

tips:细心的你可能会发现,我们全局安装了gulp，项目也安装了gulp;全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能

新建gulpfile.js文件

说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可),它大概是这样一个js文件

运行gulp

命令提示符执行gulp 任务名称;当执行gulp default或gulp将会调用default任务里的所有任务[‘testLess’,’elseTask’]