gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

    在接触了gulp的各种优势之后，让我们来看看我们要如何创建我们的第一个gulp工作流，并通过工作流构建我们第一个项目。

1. 首先，gulp是基于nodejs的自动化构建工具，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。所以，我们需要在我们的电脑上安装nodejs。【nodejs】如果使用的是PC机的朋友可能还要装一下Python，版本最好是2.6以上3.0以下。【python2.7.12】

2. 基本环境都搭好之后呢，我们就可以开始安装gulp了。具体步骤如下：

在命令行/终端中输入命令：

npm install -g gulp

这样的结果后，恭喜你，你的gulp安装成功了。

ps:如果使用npm安装插件太慢，大家可尝试使用cnpm方式安装，cnpm的安装方法可参考【cnpm-淘宝npm镜像】

    3.gulp安装好之后，我们就可以准备构建我们的gulp工作流了。首先，我们可以先在命令行/终端中输入

npm init 或 cnpm init

然后根据提示输入工作流基础信息用于创建工作流的package.json文件

构建完成后我们会发现在我们的项目目录下就会生成一个package.json文件

4.接着，我们便可以给我们的gulp工作流安装所需的各种插件，以方便我们构建项目。具体步骤如下：

在命令行中输入命令安装插件，如安装sass编译插件的命令：

npm install gulp-sass --save-dev

上述命令中的【--save-dev】的目的是为了在安装好对应插件后，更新我们刚刚生成的package.json中的插件信息

除了sass插件之外，我们还需要安装一个必要插件gulp

cnpm install gulp --save-dev

我们也可看到，在我们的根目录上，还生成了一个node_modules文件夹，这个文件夹便是用来存放我们安装插件的地方。

到此位置，我们的gulp工作流就基本已经搭建好了，那么，我们要如何使用这个工作流呢？

首先，我们还需要在根目录创建一个gulpfile.js文件

，在这个js中指定我们需要执行的任务。我们就拿编译sass文件为例。

我们现在根目录创建一个文件夹命名为“project”，其中只有一个sass文件用于测试，如下图

那么，gulpfile.js该如何定制任务呢？

其实，gulpfile.js的语法就跟普通的js一样，还是拿sass编译任务为例，代码如下：

/**

 * Created by kiner on 2016-07-26.

 */

var gulp = require("gulp"),

    sass = require("gulp-sass");//sass编译插件

/**

 * 编译sass文件

 */

gulp.task("sass", function () {//sass为我们的任务名称，在运行时需要指定此名称

gulp.src(["./project/*.sass"])

.pipe(sass())//将project下面的所有sass文件编译为css文件

.pipe(gulp.dest("./dist"));//将编译好的css文件输出至dist目录下

});

现在，我们的任务已经写完了，接下来，我们来看看运行效果是怎样的？

我们在命令行中执行以下我们上面的命令

gulp sass

如果运行结果如下：

则说明，任务已经执行成功了，那么，我们来看看我们的sass文件是否已经编译成了css文件，并输出到dist目录了呢？

就这样，我们的一个gulp命令便已经运行起来了，并达到了我们逾期的效果