搭建Gulp环境的那些事儿

最近了解了一些关于自动化构建工具的一些内容，比较常见的就属grunt,gulp,webpack，当然各个公司大佬们也有用自己公司的的构建工具。

百度科普了一下，对比了一下上文所说的那三个工具，grunt/gulp是一种能够优化前端的开发流程工具，而webpack是一种模块化的解决方案。既然如此，那我就不急，慢慢开始。废话不多说，今天就来讲讲gulp安装的那点小事。

主要分为下面几个步骤：

1.下载并安装NodeJs

2.测试node是否安装成功

3.配置npm的全局路径

4.本地安装gulp

一.下载并安装NodeJs

1.官网下载NodeJs，官网网址如下https://nodejs.org/en/，我的是win10的，我选择了后面一个下载。

2.安装node了，不要犹豫，打开下载的镜像，我选择的是node-v8.2.1-x64这个版本，然后一直点下一步，强调一下，一定要选中Add to PATH,路径选择就使用默认的就可以了，然后一直等到安装完成。

二.测试node是否安装成功

1.下面就来测试一下是否安装成功，打开dos窗口，win+R,cmd,   node -V,查看node的版本号，来验证是否安装成功，如果有版本号则说明陈宫；或者在C盘下建一个文件夹app,并且写一个test.js,内容如下：

var http = require("http");
http.createServer(function(request, response) {
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("test nodjs");
    response.end();
}).listen(8899);
console.log("nodejs start listen 8899 port!");

然后再在dos中cd到app的路径下，node test.js，若此时能打出nodejs start listen 8899 port,就说明可以了，或者选择在地址栏中键入http://127.0.0.1:8899,若打开的页面显示了

test nodejs,则说明成功。

三.配置npm的全局路径

1.配置npm的全局路径，在C:/Program Files/nodejs的目录下新建两个文件夹，分别是node_cache，node_global,新建完成，我们回到Dos中,分别键入

npm config set cache "C:\Program Files\nodejs\node_cache"和npm config set prefix "C:\Program Files\nodejs\node_global"

四.本地安装gulp

1.全局安装gulp,如果直接在dos中继续键入npm install -g gulp的话，那么就会报EPERM:operation not permitted,其实就是你的权限问题，猜测使用管理员权限打开，试了一下，果真可以。最简单的就是win+x+a,以管理员的身份打开命令提示符，

2.然后依然键入npm install -g gulp ，如果说此时报"gulp"不是内部或外部命令，不要急，想一想你的系统变量path有没有配置，没有配置的话就配置系统变量path,直接追加就好了（多个变量值用；隔开），直接追加的内容我们在dos中键入npm config get prefix，然后后面得到的这个路径就是我们要配置的path的路径。

3.系统变量怎么配置，我想是个比较低级的问题，但在这里还是提一下。右击此电脑，属性，高级系统设置，环境变量，然后就可以了，好了我们再次在dos中进行安装，这下就没有错误了。

最后见证奇迹的时刻到了，我们在dos中gulp -v，清晰地看到它的版本号，恭喜你，全局gulp配置成功。

我们再次打开C:/Program Files/node/node_cache和C:/Program Files/node/node_global，就会发现下面的路径中有内容了。至于相关插件的安装我们下次继续