一、gulp简介
gulp是一个自动化构建工具。在开发过工程中，能够使用gulp对项目进行自动构建，大大提高工作效率。
二、安装gulp
在安装gulp之前先要确认已经正确安装了node.js，然后在项目根目录下安装gulp：
$ npm install gulp
三、gulp函数接口介绍
在编写gulp配置文件gulpfile之前，需要先了解常见的函数接口：
1. gulp.src()
gulp的工作过程是这样的，首先通过gulp.src()获取我们想要处理的文件的stream（文件流）；然后，通过.pipe方法将stream导入到引用的gulp插件中进行相应的处理；最后通过gulp.dest()方法将处理后的流写入到文件中。
从gulp工作过程中可以看到，gulp.src()主要用来从文件中获取文件流。gulp.dest()函数原型如下：
gulp.src(globs[, options]
globs是文件的匹配路径和匹配形式。下面列举了部分常用的匹配形式：
（1）js/test.js //精确匹配文件
（2）js/*.js //匹配js目录下所有后缀为.js的文件
（3）js/**/*.js //匹配js目录及其子目录下所有后缀为.js的文件
（4）！js/test.js //从匹配结果中排出js目录下的test.js文件
2. gulp.task()
gulp.task()函数用来构建任务。函数原型为：
gulp.task(name[, deps], fn)
name是所构建的任务名称。fn是任务所要执行的函数，gulp具体的工作过程是在fn中进行的。示例：
var webpack = require(‘gulp-webpack‘);
var config = require(‘./webpack.config‘);
gulp.task(‘webpack‘, function() {
return webpack(config)
.pipe(uglify())
.pipe(gulp.dest(‘./dist/js‘));
});
上面的代码是我在项目中使用的部分。该部分是webpack与gulp的联合使用，第一次看到别人用时，感觉发现了新大陆。task参数function中webpack会首先执行同一目录下的webpack.config.js配置文件，对代码进行模块打包；然后，返回打包后的所有文件的文件流；文件流通过pipe进入到uglify插件后进行压缩；最后，文件流通过gulp.dest写入到设置的目录下。
3.gulp.dest()
gulp.dest()是对文件流的输出进行设置。函数原型为：
gulp.dest(path[, options])
path是文件输出路径设置。注意：path只能生成文件的目录，不能生成文件的名称，不能生成文件的名称，不能生成文件的名称，不能生成文件的名称，重要的事说四遍。而最终生成的文件的名称是由gulp.src传入的文件名决定。下面会由示例的。
文件最终生成的路径也需要注意：
（1）如果gulp.src(path)中的path带有通配符，则生成的路径由gulp.dest(path_dest)中的path_dest代替path通配符前面的部分组成。例如：
gulp.src(‘js/*/test.js‘) //假设匹配到的文件为js/source/test.js .pipe(gulp.dest(‘dist‘)); //最终生成的文件为 dist/source/test.js
（2）如果gulp.src(path)中的path没有带通配符，则生成的路径由gulp.dest(path_dest)中的path_dest与gulp.src引入的文件名组成。例如：
gulp.src(‘js/test.js‘) .pipe(gulp.dest(‘dist‘)); //最终生成的文件为 dist/test.js
四、常用的gulp插件
1. gulp-uglify插件
引入：
var uglify = require(‘gulp-uglify‘);
作用：对js文件流进行压缩。
gulp.task(‘server_test‘, function() {
return gulp.src(server/app.js)
.pipe(uglify())
.pipe(gulp.dest(‘./dist/js‘));
});
上面代码中的uglify()会对流过它的js数据流进行压缩，然后有gulp.dest写入到js目录下。
2. gulp-less插件
引入：
var less = require(‘gulp-less‘);
作用：对less文件流进行压缩
gulp.task(‘server_test‘, function() {
return gulp.src(server/device.less)
.pipe(less())
.pipe(gulp.dest(‘./dist/less‘));
});
上面代码中的less()会对流过它的less数据流进行压缩，然后有gulp.dest写入到less目录下。
3. gulp-minify-css插件
引入：
var minifyCSS = require(‘gulp-minify-css‘);
作用：对css文件流进行压缩
gulp.task(‘server_test‘, function() {
return gulp.src(server/control.css)
.pipe(minifyCSS())
.pipe(gulp.dest(‘./dist/css‘));
});
上面代码中的minifyCSS()会对流过它的css数据流进行压缩，然后有gulp.dest写入到css目录下。
gulp中有很多插件，具体根据需要来选择。
兄弟姐妹们，看完后顶一下，收藏一下吧，深夜写博客累呀！！！ 还没有一杯热牛奶....