gulp的安装与使用

当时我是第一次使用，中途有点小挫折，现在来说说我的安装和使用过程：

说之前，我先附上两个参考链接：

1.https://segmentfault.com/a/1190000005170434

2.http://blog.csdn.net/itlsx/article/details/49981459

首先参考第一个链接：

第一步：安装node.js

第二步：安装全局gulp：

第三步：配置本地项目：

这里我想说的是，如果是已经有项目的人（比如本人）了，意思是你本地有项目的代码，就可以跳过这个步骤；如果没有项目的童鞋，你可以参考链接自己配置一个本地项目。详情请参考第一个链接。

第三步：安装本地gulp：

这一步我费了一点时间，因为两个链接里面都没有谈到到底是将这个本地gulp安装在哪里......

虽然可能是我的理解能力不够，没能理解他们的博客意思，但是不管了，我现在把这个安装路径给大家说清楚些。

这个安装本地gulp，意思是要将gulp安装至你项目的路径的根目录下。

操作是这样的，点击windows，然后在输入栏里输入cmd，一般情况下，弹出来的控制命令窗口（cmd）第一行显示的都是C盘的桌面路径，这个时候你先需要操作进项目的路径。

比如你的项目在D盘，那么先输入D:，然后再cd(文件夹的名字)一步一步进入至你项目的根目录下，随后再输入npm install gulp --save-dev

安装完成之后，会出现这两个文件，很重要呢。如下图：

gulp的安装与使用

第四步：安装本地gulp插件，可参考第一个链接：

第一个链接中有三个常用插件，大家可以在输入行输入npm install --save-dev gulp-uglify gulp-concat gulp-minify-css

当然了，安装路径依旧是项目的根目录

第五步：安装之后，直接在根目录下输入gulp：

一般来说，没有项目的人会出现以下界面：

gulp的安装与使用

出现这样的界面就说明gulp可以正常使用了，而gulp的作用大家可以自行百度搜索

但是有项目的人，可能就不会出现这样的界面了，会出现这样的界面：

gulp的安装与使用

出现了错误，大家也可以看到错误的第一行的意思找不到“gulp-rev-collector”这个模块

解决的方法就是安装啦，还是在根目录，在命令行输入npm install gulp-rev-collector --save-dev进行安装即可，等待安装完成。

出现这样的原因是因为项目中的gulpfile.js的文件中有这样几行代码，这几行代码引入是刚才安装的插件，大家可以参考第一个链接的第六点，如下图所示：

gulp的安装与使用

如下项目中的gulpfile.js文件引入了其他的插件，而你的本地没有安装，那么你先需要安装才行，跟上述安装“gulp-rev-collector”这个模块一样，这里不再赘述。

安装所有所需的插件（剩余的插件可以参考链接2）之后，再次输入gulp，会出现刚才所说的界面，即

gulp的安装与使用

出现这样的界面之后，就说明你gulp不仅安装成功，而且还成功使用了一次，你会发现你的本地文件会有部分改动，改动的部分正是gulp的效果。