gulp是一个流行的前端自动化构建工具，在项目开发中，它能自动完成很多常见重复的任务，比如javascript、img、css等文件的合并，压缩，格式化等一些任务，可以提高我们编码的乐趣和工作效率。同时，gulp是基于Nodejs流的自动构建工具，也就是说，gulp利用stream（流）的方式进行文件的处理，除了中间文件，通过管道（pipe）将多个任务和操作连接起来（上一级的输出，直接变成下一级的输入），减少频繁的 I/O操作，只将最后的输出写入磁盘，因此只有一次I/O的过程，这样整个过程变得更快，流程更清晰，使我们能快速地完成构建工作。

gulp的核心api我们只需掌握了4个api就基本学会了gulp，之后我们便可以通过管道流组合自己想要的任务。

下面具体说明一下gulp的安装和使用流程。（以windows为例）

一、安装nodejs

因为gulp是基于Nodejs的，当然，首先我们就需要安装nodejs。

1、直接去官网地址（https://nodejs.org/en/download/）下载安装文件安装即可，跟安装普通软件一样简单。

2、通过如下命令测试是否成功安装nodejs和npm

打开windows命令提示符（在运行中输入cmd即可打开），输入命令 

node -v

回车，出现nodejs的版本号，说明nodejs安装成功。输入命令： 

npm -v

回车，出现npm的版本号，说明npm也安装成功了。如下图所示

说明：因为node安装包中已集成了npm，所以在安装nodejs的同时也安装了npm。

三、 全局安装gulp
  还是在上面的命令窗口，输入： 

 npm install gulp -g
 -g：表示在全局系统环境中安装。全局安装可以通过命令行在任何地方调用它，也就是说我们在任何项目都可以使用它。
 安装完成后，同样输入gulp -v出现相应的版本号，则说明安装成功。如图：


四、创建package.json配置文件

package.json是基于nodejs的项目必不可少的配置文件，放在项目根目录中，所以我们先要创建好它。
本文以如下所图项目为例:

我们先定位到当前项目位置（本项目gulp1位于D盘myapp下的），在命令窗口输入 

npm init
1、按如下图所以提示创建package.json。


Package.json 相关属性简单说明：

name – 项目的名称，必须填写的。

version – 项目的版本号，必须填写的。

description – 项目的描述。

main – 模块引入入口文件。

scripts – 脚本说明对象。

keywords – 关键字。

author – 作者姓名。

license -许可协议。

dependencies – 依赖包列表。

devDependencies -依赖的插件列表。

2、当然你也可以手动直接创建package.json文件。 
{
    "name": "test",  
    "version": "1.0.0",
    "description": "demo test",
    "main": "gulpfile.js",
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
}
注意一点：项目名称不要命名为gulp，不要与模块一样，如为gulp，本地安装gulp时就会出错。
可以参考：https://github.com/sindresorhus/gulp-imagemin/issues/7
五、 本地项目安装gulp
1、本地项目目录安装gulp，输入如下命令即可
npm install gulp --save-dev
说明：
–save：将保存配置信息至package.json；
-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；
安装完成后，gulp会安装在node_modules目录下。这时，你也会发现在我们的package.json里多了个如下devDependencies东东，那么说明安装成功了。多的代码如下：
 "devDependencies": {
    "gulp": "^3.9.1"
 }
到了这里，有人肯定会疑问，上面我们不是已经通过全局安装了gulp，为什么还要在当前项目中安装gulp呢？
其实对于这个问题，按个人理解，我想我们本地安装的gulp是安装到项目的node_modules中，项目的插件都是依赖gulp模块的，我想本地安装总是比全局安装更可取吧，简单说就是为了版本和依赖的控制更加灵活性。
具体可以看stackoverflow上的回答，（本人表示英语水平很差，看不懂…..）
Why do we need to install gulp globally and locally? 
六、 本地项目安装gulp插件

1、把需要的插件安装到本地项目，输入如下命令即可 

npm install --save-dev gulp-uglify

–save-dev后面是需要安装的名称，同时安装多个插件，可以这样： 

npm install --save-dev gulp-imagemin gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat tiny-lr
插件之间用空格隔开，安装成功后的package.json文件，你会发现devDependencies下，有我们安装的插件配置了，插件后面是版本号。如下： 
{
    "name": "test",
    "version": "1.0.0",
    "description": "demo test",
    "main": "gulpfile.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "gulp": "^3.9.1",
        "gulp-concat": "^2.6.1",
        "gulp-imagemin": "^3.1.1",
        "gulp-jshint": "^2.0.4",
        "gulp-minify-css": "^1.2.4",
        "gulp-rename": "^1.2.2",
        "gulp-uglify": "^2.0.0",
        "jshint": "^2.9.4",
        "tiny-lr": "^1.0.3"
    }
}
一些常见的插件说明：
      gulp-concat：文件拼接，我们可以用它来合并js。
      gulp-imagemin ：图片压缩
      gulp-jshint ：JSHint，检查js代码
      gulp-minify-css：压缩css文件
      gulp-uglify：压缩js文件
      gulp-minify-html：压缩html文件
      gulp-rename：重命名文件
      gulp-ruby-less：编译less
      gulp-notify：更动通知
      gulp-clean：清理档案
      gulp-load-plugins：自动加载插件
      gulp-livereload：自动刷新

更多插件可以查看：

http://gulpjs.com/plugins/

https://www.npmjs.com/browse/keyword/gulpplugin

七、 创建gulpfile.js文件
 这时，我们就可以在项目根目录下创建gulpfile.js入口文件了，编写我们要执行的任务，如下demo代码所示： 
//引入gulp和组件
var gulp = require('gulp'),
	rename = require('gulp-rename'),
	uglify = require('gulp-uglify'),
	mincss = require('gulp-minify-css'),
	concat = require('gulp-concat'),
	imagemin=require('gulp-imagemin'),
    jshint=require('gulp-jshint'),
    tinylr = require('tiny-lr');   
// 图片处理
gulp.task('minimg',function(){
	var src='src/images/*',
	    dst='dist/images';
	    gulp.src(src)
	    .pipe(imagemin())
	    .pipe(gulp.dest(dst))
})
//css压缩
gulp.task('mincss',function(){
	var css="src/css/*.css";
	gulp.src(css).pipe(mincss()).pipe(gulp.dest("dist/css"))
})
//js压缩
gulp.task('minjs',function(){
	var src='src/js/require.js';
	gulp.src(src).pipe(uglify()).pipe(gulp.dest('dist/js/lib'))
})
//拼接及压缩js
gulp.task('concatjs', function() {  
  return gulp.src('src/js/mod/*.js')
    .pipe(jshint())
    .pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});
从上面代码可以看出，首先我们要用require()载入这些插件，然后用gulp.task(‘taskName’, function() { … )};编写我们的任务。
gulpfile.js是gulp建立任务的代码文件，具体你要执行说明任务，要根据自己的需求编写代码，我们开头也说过，gulp核心API四个方法： src ，dest，task 和 watch  。关于这些方法的具体使用说明，可以查看：
 gulp中文网api：http://www.gulpjs.com.cn/docs/api/

八、运行gulp
在上面的gulpfile.js中我们创建了4个任务，要运行其中的任务时，在命令窗口输入 

gulp minimg

如图：

然后，在dist/images/目录下生成了我们压缩后的images文件。下面是我们运行gulp minimg和gulp concatjs后dist生成的文件



九、小结
通过上面分开详细的说明，看似这么多步骤，其实5个简化的步骤就可以了。（一般nodejs很多人早就安装好了）
1、全局安装gulp
2、创建package.json配置文件
3、本地项目安装gulp及配gulp插件
4、编写任务文件gulpfile.js 
5、运行任务
以上是根据自己的理解和学习记录整理出来的gulp使用流程，作为自己收藏使用gulp的教程，欢迎大家拍砖和指正。