gulp是基于NodeJs环境的一个构建工具，用来进行项目构建，处理如压缩js代码，转化less文件等任务，需要进行全局安装
npm install gulp -g
gulp实现不同的构建任务是通过其它插件来执行，gulp负责调用这些插件，可以简单理解为，gulp就是插卡游戏机，负责操作，如果想要不同的游戏那么需要换不同的卡带
需要注意，在使用gulp时需要将gulp下载到本地文件，同时下载gulp对应的插件，必须在本地新建文集gulpfile.js，名字是固定的，然后在文件内配置gulp
解析Less
-
需要在本地安装gulp，在当前文件夹执行命令
npm install gulp注意安装完成后再本地目录会有一个node_modules文件来存放node的文件
-
在本地安装gulp-less插件
npm install gulp-less -
在gulpfile.js文件中进行配置
var gulp=require("gulp"); //引入gulp文件，此时我们定义的gulp就转换为了一个对象，有gulp对应的方法 var less=require("gulp-less"); //引入gulp-less文件，同上 gulp.task("less2css",function(){ //通过.task来配置方法，less2css使我们定义的任务名 gulp.src('./less/*.less') //引入要转化的less文件，可以传入正则 .pipe(less()) //pipe作用等同于管道符，将上一次的输入结果作为下一的输出，在这里将我们获取到的less文件传给less()函数处理 .pipe(gulp.dest('./css')) //保存转换完成后的文件到指定的文件夹，如果该文件夹不存在那么会新创建一个 }) -
在git中执行本次任务
gulp less2css 完成后再当前目录会有一个css文件夹，内部就是我们转化后的css文件
相关插件
Less解析
gulp-less
压缩CSS
gulp-cssmin
压缩JS
gulp-uglify
gulp.task("uglify",function(){
gulp.src("./js/*")
.pipe(uglify())
.pipe(gulp.dest("./release/js"))
})
添加前缀
gulp-autoprefixer
相同的一个文件对不同插件的使用是可以写在一个task命令下的
var gulp=require("gulp"); //引入gulp文件
var less=require("gulp-less"); //引入gulp-less文件，同上
var cssmin=require("gulp-cssmin"); //引入压缩css插件
gulp.task("less2css",function(){
gulp.src('./less/*.less')
.pipe(less())
.pipe(cssmin())
.pipe(gulp.dest('./css'))
//先将代码转化为css格式然后将代码进行压缩后输出
})
gulp-autoprefixer是可以进行配置的
gulp.task("less2css",function(){
gulp.src('./less/*.less')
.pipe(less())
.pipe(autoprefixer({
browsers:['last 2 versions','Firefox >= 20'],//为什么版本的浏览器添加，可以选择，参数可以百度
cascade:true,//是否美化，默认是true,效果如下
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true //是否删除不必要的前缀，默认为true
}))
.pipe(cssmin())
.pipe(gulp.dest('./css'))
//将代码转化为css格式然后为代码添加前缀后将代码进行压缩后输出
})
图片压缩
gulp-imagemin
gulp.task("image",function(){
gulp.src(["./images/**/*","./img/*"],{base:"./"})
//src中可以传入2个参数，第一个参数可以是单独的字符串，也可以是数组，如果是多个文件夹下都有图片需要进行压缩，那么直接将这些文件夹路径传入即可，当然也可以写正则
//第二个参数可以写一个对象，对象中可以对src进行配置，主要了解base属性，该属性是用来声明在我们使用dest命令时如何存储经过操作的文件，如上，base赋值./代表gulp在存储的时候会去掉src中传入地址中的./,将剩余的部分拼接在dast路径上，如果我们在src中传入数组，那么会依次执行上述操作
.pipe(imagemin())
.pipe(gulp.dest("./release"))
})
代码合并
gulp-concat
gulp.task("concat",function(){
gulp.src(["./css/index.css","./css/cart.css"]) //导入要合并的文件
.pipe(concat("all.css")) //执行合并操作，all.css是我们为合并后的文件起的名字
.pipe(cssmin()) //将合并后的文件进行压缩
.pipe(gulp.dest("./release/css"))
})
压缩HTML
gulp-htmlmin
注意，该命令必须传入参数，否则没有效果
gulp.task("html",function(){
gulp.src("./index.html")
.pipe(htmlmin({
removeComments: true,//清除HTML注释
collapseWhitespace: true,//压缩HTML
collapseBooleanAttributes: true,//省略布尔属性的值 ==>
removeEmptyAttributes: true,//删除所有空格作属性值 ==>
removeScriptTypeAttributes: true,//删除
内容替换
gulp-rev- collector
用来将经过rev设定版本号以后页面中引入文件的名字替换原来的文件名
gulp.task('revCollertor', ['css', 'image', 'useref'], function () { //将之前的image等命令作为依赖注入到rev命令中，在rev命令执行之前先执行这些命令
gulp.src(['./release/rev/*.json', './release/*.html', './release/views/*.html'], {base: './release'}) //[]中第一个参数是rev下的json文件，里面存储文件的对应关系，后面的参数分别是我们需要做替换的文件
.pipe(revCollector())
.pipe(gulp.dest('./release'));//存储到release文件下
});
注意在我们将less文件转化为css格式之后，页面中我们写的less名字需要在合并时改为.css的格式，否则在内容替换的时候gulp不能正确对应并更换
其他任务
对于一些不需要我们构建的任务，例如后台的代码，我们只需要将它们整体传入到release文件夹下即可
gulp.task('other', function () {
gulp.src(['./api/*', './public/*(fonts|libs)/*'], {base: './'})
.pipe(gulp.dest('./release'));
});
整体执行
在我们项目构建完成后，我们可已将所有的命令作为依赖注入到一个命令中，方便以后我们再次构建，再一次构建的时候只需要执行这个命令，而不需要将所有的命令都重复执行
gulp.task("release",["revController","ourther"]); //之前我们已经将其他命令注入到revController中，所以不需要 重复传递了
gulp接口
task
在task中可以传入3个参数，分别是任务名称，任务依赖，以及执行任务的callback
gulp.task("revCollertor",["image","css"],function(){
// gulpr任务的执行是异步操作，有可能在我们rev下的json文件还没有生成的情况下替换任务就已经开始了，那么此时替换任务找不到文件对应的json文件，默认不会替换页面内容，那么页面中的文件名就不会被替换，所以需要我们将之前的任务作为依赖注入到revCollertor中，在revCollertor执行时保证其他任务先执行完毕
//这里表明revCollertor任务需要在image和css任务完成之后再执行
})
这里还需要注意，如果我们要想将其他任务作为依赖，那么在其他任务执行时需要将它们返回，在gulp前添加一个return，如下：
gulp.task('useref', function () {
return gulp.src('./index.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulp.dest('./release/view'));
});
src
路径
pipe
管道
dest
存储，参数为存储路径
watch
可以实时监听，例如我们可以使用该功能实时监听less变化，然后将less解析为css
gulp.task("watchLess",function(){
gulp.src("./css/index.less") //监听css下的index.less文件的变化
.pipe(less()) //调用gulp-less插件
.pipe(gulp.dest("./css/index.css")); //存储为css文件，然后在页面中直接引入index.css即可
})
还能够实现浏览器实时展现css文件效果