1.gulp的安装
1.1. 在gulp安装前,请确保正确安装了node.js的环境。然后再全局安装gulp
npm install -g gulp
1.2. 完成gulp的全局安装之后,还需要在每个使用gulp的项目中单独的安装一次,如果需要将gulp添加到package.json文件的依赖中,则需要在后面添加--save-dev
npm install --save-dev gulp
2.gulp的使用
2.1 新建gulpfile.js文件
gulp.js的运行需要一个主文件,主文件的文件名为gulpfile.js(注:文件名不能改变),然后我们就可以在gulpfile.js文件中定义我们的gulp任务了,一个简单的gulp任务如下:
var gulp = require("gulp");
gulp.task("default",funciton(){
console.log("hello gulp!!!");
})
2.2 运行gulp任务
打开命令行,将目录切换到gulpfile.js 所在的目录,在命令行中运行 gulp, gulp的后面也可以跟任务名,如gulp taskName。如果任务名为default,则可以省略,如本例,直接运行gulp即可。
3.gulp的API
gulp的工作流程:gulp是基于Nodejs中的stream(流)工作的,首先获取到需要gulp进行处理的文件流(使用gulp.src()),然后通过stream的pipe()方法导入到需要处理的地方,例如合并文件的插件中, 经过插件处理后的流又可以通过pipe继续导入到其他的插件中,如压缩文件的插件,也可以将流写入到文件中(使用gulp.dest())
3.1 gulp.src()
作用:用来获取流,注意这里的流里面的内容并不是原始的文件流,而是一个虚拟的文件对象流,这个虚拟的文件对象流中储存着原始文件的文件名,路径和内容等信息。
语法:gulp.src(globs[,options]);
globs:文件的匹配模式(可以通过一定的规则来匹配文件的路径),可以直接理解为需要进行处理的文件的路径。如果包含多个匹配模式时,该参数可以是一个数组
options:可选参数,通常不需要用到
? 匹配一个字符,但不匹配/
* 匹配0个或多个字符,但不能匹配/,若/出现在末尾则除外。例:能匹配index.html,src/;但不能匹配src/index.html
** 匹配0个或者多个目录,但需要单独出现,但需要作为单独的一级目录出现,即左右除了/外,不能有其他的字符。例:能匹配index.html,src/index.html,object/src/index.html
[] 匹配方括号中出现的任意一个字符,若方括号中的内容以^或!开头,则表示不匹配方括号中出现的任意一个字符。例[abc].js能匹配a.js,b.js,c.js,但不匹配ab.js,abc.js等;[^abc].js匹配除a.js,b.js,c.js外的其他js文件;
!(pattern|pattern|pattern) 匹配除括号中任意一种模式以外的其他模式
@(pattern|pattern|pattern) 匹配括号中给定的任意模式一次
?(pattern|pattern|pattern) 匹配括号中给定的模式0次或1次
*(pattern|pattern|pattern) 匹配括号中给定的模式0次或多次
+(pattern|pattern|pattern) 匹配括号中给定的模式至少一次
a{b,c}d 匹配abc,acd
a{b,}c 匹配abc,ac
a{0..2}c 匹配a0c,a1c,a2c
3.2 gulp.dest()
作用:用来将文件流写入文件的
语法:gulp.dest(path[,options])
path: 为写入文件的路径;
注:使用gulp.dest()时,传入的路径参数,只能够用来指定要生成的文件的路径,并不能指定文件名。生成的文件的文件名是导入文件的文件名。例如:
gulp.src("a/b.js")
.pipe(gulp.dest("c/d.js"))
//最终生成的文件的路径为c/d.js/b.js,并不是c/d.js;
可以使用gulp-rename插件来更改文件名。
注:gulp.dest(path)生成的文件路径是path参数的路径再加上gulp.src()中有通配符开始出现的那部分路径;如
gulp.src("src/**/jquery.js")
//有通配符开始出现的那部分路径为**/jquery.js
.pipe(gulp.dest("dist"));
//最后生成的路径dist/**/jquery.js
/*若通过gulp.src("src/**/jquery.js")中的匹配模式匹配到的路径为"src/lib/jquery.js",则最后生成的路径为"dist/lib/jquery.js"*/
我们可以通过配置gulp.src()方法中的base参数,来改变gulp.dest()生成的文件路径
但不配置base参数时,base参数默认为通配符开始出现之前的那部分文件路径,如上例中的src
其实,通过gulp.dest(path)生成的文件的路径就是用path替换gulp.src()中的base后,得到的文件路径。
gulp.src("src/lib/**/jquery.js",{base:"src"})
.pipe(gulp.dest("dist"));
/*若通过gulp.src("src/lib/**/jquery.js")中的匹配模式匹配到的路径为"src/lib/script/jquery.js",则最后生成的路径为"dist/lib/script/jquery.js",而不再是dist/script/jquery.js*/
通过gulp.dest()将文件流写入文件后,文件流仍然可以继续使用
3.3 gulp.task()
作用:用来定义一个gulp的任务
语法:gulp(name[,deps],fn)
name: 任务名 若为"default"时,则可以直接通过gulp命令执行,不需要gulp taskName
deps: 可选。定义当前任务需要依赖的其他任务,为一个数组。若定义这个参数,这需要等待依赖任务都执行完毕后,当前任务才会执行
fn: 可选,即当前任务需要执行的函数。
gulp.task('default',['task1','task2','task3']);
//运行gulp命令,就相当于执行了task1,task2,task3这三个任务
//如果task1,task2,task3任务之间没有依赖关系,则会按照书写的顺序来执行。如果存在依赖关系,则会按照依赖关系来先后执行,但是如果依赖的任务中包含有异步操作,并不会等待异步操作执行完成后才执行当前任务,如
gulp.task('one',function(){
//one是一个异步执行的任务
setTimeout(function(){
console.log('one is done')
},5000);
});
//two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
console.log('two is done');
});
若需要等待异步任务中的异步操作完成后再执行后续的任务,有如下三种方法实现:
1.可在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。
gulp.task('one',function(cb){ //cb为任务函数提供的回调,用来通知任务已经完成
//one是一个异步执行的任务
setTimeout(function(){
console.log('one is done');
cb(); //执行回调,表示这个异步任务已经完成
},1000);
});
//这时two任务会在one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
console.log('two is done');
});
2. 定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。
gulp.task('one',function(cb){
var stream = gulp.src('client/**/*.js')
.pipe(dosomething()) //dosomething()中有某些异步操作
.pipe(gulp.dest('build'));
return stream;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});
3. 返回一个promise对象,例如
var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/q
gulp.task('one',function(cb){
var deferred = Q.defer();
// 做一些异步操作
setTimeout(function() {
deferred.resolve();
}, 5000);
return deferred.promise;
});
gulp.task('two',['one'],function(){
console.log('two is done');
});
3.4 gulp.watch()
作用:用来监视文件的变化;
语法:gulp.watch(glob[, opts], tasks);
glob 需要监控的文件匹配模式,规则同gulp.src()中的glob
tasks 文件变化后执行的任务,为一个数组;
例:
gulp.watch("src/**",[task1,task2])
//当文件发生变化后,执行task1,task2任务
也可以传入一个回调函数。每当监视的文件发生变化时,就会调用这个函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息,type属性为变化的类型,可以是added,changed,deleted;path属性为发生变化的文件的路径
gulp.watch('js/**/*.js', function(event){
/*do something*/
console.log(event.type);
//变化类型 added为新增,deleted为删除,changed为改变
console.log(event.path); //变化的文件的路径
});
注:个人gulp学习笔记,参考博客:http://www.cnblogs.com/2050/p/4198792.html