《初识Gulp》

前言

    软件开发未来的发展趋势是前后端分离，维护性更强，互相独立。随着这种趋势的发展，必然也伴随着一些工具的产生。本篇博文的主人公Gulp就是在未来适应于这种发展趋势的web前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，下面就跟着小编一起来认识一下吧。

简介：

     Gulp是基于Nodejs的自动任务运行器，可以自动化地完成JavaScript、coffee、sass、less、html、image、css等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。其中，在实现上，借鉴了Unix操作系统的管道（pipe）思想，从而使得前一级的输出，直接变成后一级的输入。

     简单来讲，Gulp可优化网站资源；提高代码复用性；规避浏览器兼容的问题。

正文：

想要使用Gulp,肯定就得给人家一个生存环境，这样人家才能更好地为你服务：

1.安装Nodejs：

打开nodejs官网，点击硕大的绿色Download按钮，它会根据系统信息选择对应版本（.msi文件）。

之后安装完毕之后，需要使用命令提示符来进行目录定位，即之后关于Gulp运行的任务放在哪个位置：

我的项目直接放在了G盘，迅雷下载的文件下

2.新建package.json文件：

值得关注：package.json是基于nodejs项目必不可少的配置文件，需要将其存放在项目根目录中

3.全局和本地安装Gulp：

（1）全局安装：

命令提示符执行cnpm install gulp -g

（2）本地安装：

命令提示符执行cnpm install gulp --save-dev

PS:全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能。

4.安装Gulp插件

命令提示符执行cnpm install  插件名称 --save-dev

5.新建gulpfile.js文件

6.

（1）通过命令提示符运行Gulp任务

命令提示符执行gulp 任务名称

（2）在webstorm当中运行Gulp任务

PS:运行Gulp任务使用的应用程序为webstorm,使用Gulp的最后一步是通过命令提示符来运行Gulp任务，当然也可直接在webstorm当中运行

结语：

    在搭建了Gulp的基本运行环境之后，每个Demo的实现都是有着基本的套路的，预知套路为何，敬请期待下篇博文。

    刚开始自己走了很多弯路，不知道这些命令会将文件安装在哪里，也同样不知道一个Gulp任务执行成功后的显示是什么。后来在自己的实践基础之上，Bill做了宏观指导，接下来的工作就较为顺利。我的合作伙伴师德帅他的学习思路是宏观把控，理解了基本运行思路之后再着手，这样的学习方式很容易进入状态，这是需要我值得学习的地方。