gulp是用于前端构建的基于文件流的一套工具。可以用于压缩、编译、合并、检查文件等操作。可以节省大量的用于繁琐重复操作的人力。最开始就是安装gulp工具了，在命令行中切换到工作的文件目录下，安装gulp；可以选择局部安装（cnpm install gulp --save-dev），也可以选择全局安装（cnpm install gulp -g）。
使用gulp主要要用到3个API：
（1）gulp.src()：
主要用于获得匹配的目标文件。src的参数可以是一个匹配字符串（*是通配符），也可以是一个确定的文件路径，还可以是一个数组 （包含多个筛选项或者多个目标路径）。匹配字符串前面加上感叹号“!”代表不匹配。这个函数会返回所有匹配的文件。后跟 pipe（gulp的中心思想，继承于Unix的管道思想）可以对返回的文件进行下一步操作。总之，可以把这个函数看做是一个查找匹配文件 的 方法就行。
（2）gulp.dest()：
如果说gulp.src()是文件输入操作，那么gulp.dest()就是文件输出操作。gulp.dest()用于将处理过后的文件输出到目标文件夹，值得一提 的是如果指定的文件夹不存在，gulp.dest()函数会自动创建路径。通常，gulp.dest()函数是gulp任务函数（下文提及）的最后一步。
（3）gulp.task()：
gulp.task()函数是gulp用于定义gulp任务的API，其一般用法如下：
1 gulp.task(‘TaskName‘,function(){
2 //Task details, do something...
3 });
当然还有一些特殊用法，比如使用回调函数和前缀函数，这些用法用的没有那么多。
经常使用的API就是这三个，其他功能的实现主要取决于gulp插件了。
下面是几个常用功能在定义gulp任务时的实例：
（1）压缩js文件实例：
这里要用到的gulp插件名字叫gulp-uglify。
首先在npm中安装gulp插件：cnpm install gulp-uglify --save-dev或者cnpm install gulp-uglify -g；
然后手动创建一个gulpfile.js文件，在文件中写js代码：
1 var gulp = require(‘gulp‘),
2 uglify = require(‘gulp-uglify‘);
3 gulp.task(‘compressJS‘,function () {
4 gulp.src(‘JS_Prepage.js‘)
5 .pipe(uglify())
6 .pipe(gulp.dest(‘dist/js‘));
7 });
然后在node命令行或者webstorm中调用任务就可以了。
（2）压缩CSS文件的实例：
要用到的gulp插件名字为gulp-minify-css；
首先要在npm中手动安装这个gulp插件，cnpm install gulp-minify-css -g或者cnpm install gulp-minify-css --save-dev
然后就可以用gulp.task()定义任务了：
1 var gulp = require(‘gulp‘);
2 var minify = require(‘gulp-minify-css‘);
3 gulp.task(‘compressCSS‘,function(){
4 gulp.src([‘*.css‘,‘!*.min.css‘])
5 .pipe(minify())
6 .pipe(gulp.dest(‘dist/css‘));
7 });
然后在node命令行或者webstorm中调用任务就可以了。
（3）压缩图像实例：
要用到的插件名字为gulp-imagemin（实际上，因为模块化的思想，前端一个gulp模块基本只能实现一个特定的功能，
所以针对不同的图像格式，可能需要引用不同的gulp插件）。
首先在npm中手动安装这个gulp插件，cnpm install gulp-imagemin -g或者cnpm install gulp-imagemin --save-dev
然后就可以用gulp.task()定义任务了：
1 var gulp = require(‘gulp‘),
2 imagemin = require(‘gulp-imagemin‘);
3
4 gulp.task(‘image-compress‘,function () {
5 gulp.src(‘head.png‘)
6 .pipe(imagemin())
7 .pipe(gulp.dest(‘dist/pics‘));
8 });
（4）其他实例大同小异，一般只是引用的包不同。
总结gulp.task()定义任务的方法：
var gulp = require(‘gulp‘); //要用到gulp.task等gulp操作就必须引用gulp模块。
var name = require(‘gulp-pluginname‘);//这里的name可以自定义，用于表示引用到的模块包，后面require里面的参数是你之前在npm安 //装的插件的名称，必须符合要求。一般gulp插件格式为gulp-xxx。
gulp.task(‘TaskName‘,function(){ //TaskName可以自定义，在调用时要用到。
gulp.src(‘xxxxx‘) //指定要操作的文件路径
.pipe(name()) //与之前第二行引用包时定义的变量相呼应，这里必须相同。
//可以看出来用一个变量接受引用到的模块，这个变量就是一个方法。
.pipe(gulp.dest(‘DirectoryName‘));//定义目标文件路径，指定将操作后的文件存放到何处。通常处理后的文件放在dist目录下
});
介绍完gulp的基本API之后，就是API的基本使用流程了，
Gulp使用方法：
gulp通过gulp.task()方法，将任务定义在一个名为gulpfile.js的文件中（文件名称固定）。定义好之后就可以在node命令号中通过gulp TaskName执行任务了。TaskName就是在gulpfile.js中定义的任务名称。另外还可以通过WebStorm这个IDE执行gulp任务。具体步骤如下图：
(1)WebStorm执行gulp任务：
（2）node命令行执行gulp任务：
