一文汇总gulp知识点，就问你全不全？

gulp简介

 gulp，读作“告扑”，接触过java的同学都知道ant，jekenis等这些自动化构建工具，不过那是针对java的，在前端也有这样的构建工具，它就是今天要介绍的gulp，这个gulp的功能和我们前边学过的webpack的功能有一定的交叉，但是不尽相同。

gulp可以干什么？

        文件的复制、移动等

        压缩、合并js或者css文件

        把sass或者less文件编译成css

        压缩图像文件

        创建一个可以实时刷新的服务器

        ......

总之，仿佛如果你感觉某件事情做起来比较繁琐，重复性比较高，它都可以抽象为一个gulp任务。gulp里面有个重要的概念-----“gulp任务”，顾名思义，gulp任务是能够完成一定功能的一段代码，这段代码可以在你指定的条件下执行，我们以后会说的。

gulp的安装与运行你的第一个gulp任务

分别在全局和本地项目安装gulp

D:\zhao\nodews>npm install -g gulp
D:\zhao\nodews>npm install  gulp --save-dev

gulp只是协助项目构建的工具，我在线上并不需要它，因此在本地项目安装的时候并不需要保存在dependcies中，只需要通过--save-dev保存在devDependencies中就可以了。安装完成之后，查看package.json：

说明安装成功了。

gulp的任务是写在一个名字叫做"gulpfile.js"中的，我们看看如何创建一个最简单的gulp任务呢？

新建gulpfile.js：

var gulp = require('gulp');  
gulp.task("myfirsttask",function(){
	console.log("我的第一个gulp任务");
});

运行任务：

D:\zhao\nodews>gulp myfirsttask
[10:16:45] Using gulpfile D:\zhao\nodews\gulpfile.js
[10:16:45] Starting 'myfirsttask'...
我的第一个gulp任务
[10:16:45] Finished 'myfirsttask' after 257 μs

解释：

        gulp  myfirsttask命令默认去gulpfile.js的文件中寻找名字叫做myfirsttask的任务。

        gulp 通过task("任务名",回调函数)这个api来定义任务。

gulp命令常用参数

-v或者--version：查看gulp的版本

D:\zhao\nodews>gulp -v
[10:24:04] CLI version 3.9.1
[10:24:04] Local version 3.9.1

--gulpfile  文件名xxx.js  ：gulp默认去名字为"gulpfile.js"的文件中去寻找任务，这个参数可以指定从xxx文件中寻找任务

-T或者--tasks：显示gulp任务的依赖关系,比如：

gulp的执行流程与api

gulp执行流程

        1.利用gulp.src()api获取要处理的文件流

        2.通过pipe()api把第一步中获取的文件流导入到gulp的插件中

        3.把经过gulp插件处理过的流再通过pipe()方法导入到gulp.dest()中

        4.gulp.dest()方法把流的内容写到指定的目录中

gulp的写法有jQuery的特点---------连缀，gulp里面的流总是遵循这样的规则：上一步的输出作为下一步的输入，gulp不额外生成文件，io处理起来相当高效。

gulp的api

        上面看到了gulp.src()、pipe()、gulp.dest()等这些方法，也叫api（application interface，应用程序接口），都是gulp里面的方法，gulp提供给我们的方法并不都，使用起来简单方便、易于记忆。

一、gulp.task

    格式：gulp.task(name [, deps, fn])

    功能：定义一个任务, name 是你随便起的task名字。deps是可选项，指的是你定义的这个task依赖的tasks，是一个数组。 fn是task要执行的函数,也就是这个任务要做什么事情。

     举例：如我们上篇文章里面给出的简单任务：

var gulp = require('gulp');  
gulp.task("myfirsttask",function(){
	console.log("我的第一个gulp任务");
});

二、gulp.src

     格式：gulp.src(globs[, options])

     功能：globs指定规则，跟正则表达式格式差不多，可以是string或者一个数组。src的作用是获取与globs 匹配的文件输入流

     举例：拷贝d:\zhao\nodews目录下的文件test.html到d:\zhao\nodews\destdir目录下：

gulp.task("copy",function(){
	 gulp.src("./test.html")
		 .pipe(gulp.dest("./destdir"));
});

   执行：

D:\zhao\nodews>gulp copy
[10:42:16] Using gulpfile D:\zhao\nodews\gulpfile.js
[10:42:16] Starting 'copy'...
[10:42:16] Finished 'copy' after 9.07 ms

 

三、 gulp.dest

     格式：gulp.dest(path[, options]) 

     功能：path是最终文件要输出的路径,注意这个path不管你最后是文件还是目录，这个dest方法都会生成目录，所以path要写成以目录结尾的形式，options一般不用

     举例：见上面拷贝的例子

四、gulp.watch

     格式：gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, callback]) 

     功能：glob的写法规则与前边src里面的glob一样。watch作用是监视文件的变化，然后运行指定的Tasks或者函数，tasks的格式是数组

     举例：修改上边拷贝的例子，每当test.html被修改后，让gulp就自动拷贝到destdir中，而不需要你去手工执行gulp  copy命令，怎么实现呢？

var gulp = require('gulp');  
gulp.task("copy",function(){
	 gulp.src("./test.html")
		 .pipe(gulp.dest("./destdir"));
});  
gulp.task("testwatch",function(){
	 gulp.watch("./test.html",["copy"]);
});

执行：

程序会一直阻塞 在这里，这是当我们修改test.html的时候，他就会被拷贝到destdir中。

看watch的第二种写法：

var gulp = require('gulp');  
gulp.task("copy",function(){
	 gulp.src("./test.html")
		 .pipe(gulp.dest("./destdir"));
});  
gulp.task("testwatch2",function(){
	 gulp.watch("./test.html",function(e){
		 console.log(e);
	 });
});

执行gulp  testwatch2,并修改test.html，结果：

在gulp.watch(glob [, opts, callback]) 方法中，回调函数cb有一个参数e,这个参数有两个属性，

type：表示事件的类型，可能是added changed  deleted

path:表示触发这个事件的文件的绝对路径

gulp的插件介绍与常用插件汇总

前边我总结了gulp的几个api方法，可以看到gulp虽然简单，因为api也就那几个，玩来玩去也只能做做拷贝文件、监听文件变化的事情了吗？难道gulp的命运就此终结？gulp之所以强大、流行的原因不在于它本身有多强，而在于它简单的api以及它海纳百川的"度量"。很多人基于gulp开发了名目繁多的插件，有些在我们的项目中会经常用到。比如：

        编译less  gulp-less

        文件合并  gulp-contact

        js压缩    gulp-uglify

        重命名文件  gulp-rename

        css压缩        gulp-minify-css

        html压缩        gulp-minify-html

        优化图像大小   gulp-imagemin

        创建本地服务器  gulp-server

        实时预览        gulp-connect

        自动导入插件  gulp-load-plugins

每种插件在使用之前都需要使用 npm安装，安装之后再gulpfile.js中require就可以使用了。

gulp插件之gulp-less的使用

  gulp的插件gulp-less用于把less预处理文件编译为css文件，在这之前，我们也介绍过使用npm安装npm install -g less           并通过 lessc less.less less_generate.css  的方式来编译less文件达到生成css的目的。今天我们说的是可以实现相同功能的gulp-less插件。

安装

D:\zhao\nodews>npm install -g gulp-less
D:\zhao\nodews>npm install  gulp-less --save-dev

编写gulpfile.js使用gulp-less

var gulp = require('gulp');  
var less = require('gulp-less');  //引入gulp-less
gulp.task("less2css",function(){
	gulp.src("./less.less")
		.pipe(less())   //把输入流交给less处理并返回输出流
		.pipe(gulp.dest("./destdir"))
});

  编写less.less:

@txtcolor: #4D926F;
p {
  color: @txtcolor;
}

执行task:

在destdir目录下面生产了一个名字叫做less.css，内容：

p {
  color: #4D926F;
}

可以看到，使用gulp-less插件已经成功完成了less文件的编译。

gulp插件之gulp-load-plugins的使用

 当我们需要在gulpfile.js中引入多个gulp插件时，显得有点臃肿，如下面：

你引入的可能比两个更多，什么压缩css、压缩js了之类的，这时候可以直接使用gulp-load-plugins插件来简化书写。gulp-load-plugins会自动帮你加载在package.json中的插件。

安装gulp-load-plugins：

D:\zhao\nodews>npm install gulp-load-plugins -g
D:\zhao\nodews>npm install --save-dev gulp-load-plugins

使用的时候，我就用它来改写上面编译css的gulpfile吧：

var gulp = require('gulp');  
var $ = require("gulp-load-plugins")();
gulp.task("less2css2",function(){
	gulp.src("./less.less")
		.pipe($.less())   //使用gulp-load-plugins自动加载插件，less()改为$.less()
		.pipe(gulp.dest("./destdir"))
});

执行，结果跟以前是一样的。

要注意呀，var $ = require("gulp-load-plugins")();最后边还有个(),不能少。

gulp插件之gulp-concat插件的使用

安装：

D:\zhao\nodews>npm install gulp-concat  --save-dev

gulp-concat用于把几个文件的内容合并在一起，不管你的文件是js还是css还是其他类型的文件，都可以。

示例程序gulpfile.js：

var gulp = require('gulp');  
var concat=require("gulp-concat");
gulp.task("concatfiles",function(){
	gulp.src("./js/*")
		.pipe(concat("app.js"))   //参数为合并后的文件叫什么名字
		.pipe(gulp.dest("./destdir"))
});

js文件夹下面有两个文件，分别叫做form.js和funcs.js,内容都是我随便写的,不用太在意啥意思，forms.js:

function str2Json(formSelector){
	var arr=$(formSelector).serializeArray();//"#pageCfg_form"
	var data={};
	//[{name:"a",value:"b"},{name:"f",value:"zuqiu"},{name:f,value:"lanqiu"},{name:"uname",value:"aaa"}]
	$.each(arr,function(i,obj){
		if(data[obj["name"]]){//复选框可能提交多个
			data[obj["name"]]=data[obj["name"]]+","+obj["value"];
		}else{
			data[obj["name"]]=obj["value"];
		}
	});
	return data;
}

funcs.js：

function check(val) {  
    if (val < 10) {  
        return "0" + val;  
    } else {  
        return val;  
    }  
}

执行gulp任务：

打开app.js：

可以看到合并成功了。

gulp插件之gulp对js文件进行压缩--gulp-uglify的使用

 gulp-uglify是gulp的一个插件，作用是对js文件进行压缩，比如我们常见的xx.min.js就完全可以用这种方法来生成。文件被压缩了，当然很难看懂，看起来也不美观了，一般压缩之后，就3行或者4行，看起来跟乱码似得，这也许是这个插件叫做uglify的原因吧。

安装：

D:\zhao\nodews>npm  install gulp-uglify --save-dev

需求：把当前目录下的js这个目录里面的文件合并后压缩，压缩文件名字叫做app.min.js，编写gulpfile.js如下。

var gulp = require('gulp');  
var concat=require("gulp-concat");
var uglify=require("gulp-uglify");
gulp.task("uglifyfiles",function(){
	gulp.src("./js/*")
		.pipe(concat("app.min.js"))
		.pipe(uglify())//pipe()把前边的输出作为输入传给了uglify(),uglify()进行压缩		
		.pipe(gulp.dest("./destdir"))
});

执行gulp  uglifyfiles:

D:\zhao\nodews>gulp uglifyfiles
[13:39:35] Using gulpfile D:\zhao\nodews\gulpfile.js
[13:39:35] Starting 'uglifyfiles'...
[13:39:35] Finished 'uglifyfiles' after 13 ms

打开app.min.js:

可以看到已经被压缩了。

gulp插件之gulp-rename的使用

gulp-rename作用：

        对gulp处理好的文件执行dest（）方法放到目的地之前进行重命名，其实就相当于又复制了一个，比如当我们合并js后者css文件的时候，想生成压缩的文件和不压缩的文件，这时候就可以使用到gulp-rename了。

安装

  npm install gulp-rename  --save-dev

package.json:

示例：

var gulp = require('gulp');  
var concat=require("gulp-concat");
var uglify=require("gulp-uglify"); 
var rename=require("gulp-rename");
gulp.task("two",function(){
	gulp.src("./js/*")
		.pipe(concat("app.js"))
		.pipe(gulp.dest("./destdir"))  //输出未经压缩的app.js
		.pipe(uglify())//pipe()把前边的输出作为输入传给了uglify(),uglify()进行压缩
		.pipe(rename("app.min.js"))
		.pipe(gulp.dest("./destdir"))//输出经压缩的app.min.js
});

gulp插件之gulp压缩css插件gulp-minify-css的使用

gulp-minify-css插件用来压缩css。

gulp-minify-css的安装：

D:\zhao\nodews>npm install gulp-minify-css --save-dev

测试gulpfile.js:

var gulp = require('gulp');  
var minifyCss=require("gulp-minify-css");
gulp.task("mincss",function(){
	gulp.src("./style.css")
		.pipe(minifyCss())
		.pipe(gulp.dest("./destdir"))//输出经压缩的app.min.js
});

为了简单，我的style.css就一点，你可以多写点哦，我偷懒了，太累了：

p {
  color: #4D926F;
}

执行任务：

D:\zhao\nodews>gulp mincss
[14:19:01] Using gulpfile D:\zhao\nodews\gulpfile.js
[14:19:01] Starting 'mincss'...
[14:19:01] Finished 'mincss' after 15 ms

查看输出的文件，发现在destdir多了一个style.css,内容如下：

p{color:#4D926F}

已经压缩css成功了