天天看点

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

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

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

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

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

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

点击Next按钮

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

勾选复选框,点击Next按钮

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

阅读协议,点击Next

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

选择安装位置,点击Next

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

选择换行格式,点击Next

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

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

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

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

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

使用MinTTY终端

使用windows默认的命令行

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

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

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

开始安装

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

安装完成,点击Finish

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

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

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

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

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

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

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

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

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

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

在控制台输入命令:

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

ssh-keygen -t rsa -C "youremail"

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

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

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

将SSH key设置到GitHub中

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

新建gulpfile.js文件

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

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

运行gulp

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

继续阅读