一、gulp API 简介
gulp 本身能做的事情非常少,主要是通过插件来提供各种功能,gulp 本身只提供了4个非常简洁的 API, 掌握这4个 API 你就基本掌握了 gulp 的全部。
1、gulp.src(globs[, options])
2、gulp.dest(path[, options])
3、gulp.task(name[, deps], fn)
4、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
二、gulp.src(globs[, options])
说明:返回当前指定文件流至可用插件。
globs:需要处理的源文件匹配符路径。类型(必填):String or StringArray。
通配符路径匹配示例:
1、"src/index.js": 指定具体文件;
2、"{}": 匹配多个属性。例:src/{a,b}.js(包含 a.js 和 b.js 文件) src/*.{jpg,png,gif}(包含 src 下的所有 jpg/png/gif 文件);
3、"!": 排除指定文件。例:!src/index.js(不包含 src 下的 index.js 文件);
4、"*.scss": * 号匹配当前目录任意文件,所以这里 *.scss 匹配当前目录下所有 scss 文件;
5、"**/*.scss": 匹配当前目录及其子目录下的所有 scss 文件;
6、"*.+(scss|sass)": + 号后面会跟着圆括号,里面的元素用 | 分割,匹配多个选项。这里将匹配 scss 和 sass 文件;
options:类型(可选):Object,有3个属性 buffer、read、base。
1、options.buffer:类型:Boolean 默认:true 设置为 false,将返回 file.content 的流并且不缓冲文件,处理大文件时非常有用;
2、options.read:类型:Boolean 默认:true 设置 false,将不执行读取文件操作,返回null;
3、options.base:类型:String 设置输出路径以某个路径的某个组成部分为基础向后拼接;
示例:
gulp.src(['js/*.js','css/*.css','*.html']) // 使用数组的方式来匹配多种文件
gulp.src(['src/*.js','!src/b*.js']) // 匹配所有js文件,但排除掉以 b 开头的 js 文件gulp.src(['!src/b*.js','src/*.js']) // 不会排除任何文件,因为排除模式不能出现在数组的第一个元素中
gulp.src('src/js/**/*.js', { base: 'src' }) // 保留 src 路径后的所有路径名称
gulp.src(['less/**/*.less','!less/{extend,page}/*.less']) // 匹配 less 目录下和子目录下的所有 less 文件,但排除 less 目录下 extend 和 page 目录下的所有 less 文件
三、gulp.dest(path[, options])
说明:dest 方法是指定处理完后文件输出的路径。
path: 类型(必填):String or Function 指定文件输出路径,或者定义函数返回文件输出路径亦可。
options:类型(可选):Object,有2个属性 cwd、mode。
1、options.cwd:类型:String 默认:process.cwd():前脚本的工作目录的路径,只在所给的输出目录是相对路径时候有效;
2、options.mode:类型:String 默认:0777 指定被创建文件夹的权限;
PS:我们给 gulp.dest() 传入的路径参数,只能用来指定要生成的文件的目录,而不能指定生成文件的文件名,它生成文件的文件名使用的是导入到它的文件流自身的文件名,所以生成的文件名是由导入到它的文件流决定的,即使我们给它传入一个带有文件名的路径参数,然后它也会把这个文件名当做是目录名。要想改变文件名,可以使用 gulp-rename 插件。
示例:
// 最终生成的文件路径为 dist/foot.js/jquery.js,而不是 dist/foot.js
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foot.js'));
// 最后生成的文件路径为 dist/**/*.js
// 如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js
gulp.src('script/**/*.js') // 有通配符开始出现的那部分路径为 **/*.js
.pipe(gulp.dest('dist'));
// 最后生成的文件路径为 dist/avalon.js
gulp.src('script/avalon/avalon.js') // 没有通配符出现的情况
.pipe(gulp.dest('dist'));
// 假设匹配到的文件为 script/util/underscore.js
// 则最后生成的文件路径为 dist/util/underscore.js
gulp.src('script/**/underscore.js') // 有通配符开始出现的那部分路径为 **/underscore.js
.pipe(gulp.dest('dist'));
// 假设匹配到的文件为 script/zepto.js
//则最后生成的文件路径为 dist/zepto.js
gulp.src('script/*') // 有通配符出现的那部分路径为 *
.pipe(gulp.dest('dist'));
//设该模式匹配到了文件 app/src/css/normal.css
// 用 dist 替换掉 base 路径,最终得到 dist/css/normal.css
gulp.src('app/src/**/*.css') // 此时 base 的值为 app/src,也就是说它的 base 路径为 app/src .pipe(gulp.dest('dist'));
// 假设匹配到的文件为 script/lib/jquery.js
// 生成的文件路径为 build/jquery.js
gulp.src('script/lib/*.js') // 没有配置 base 参数,此时默认的 base 路径为 script/lib
.pipe(gulp.dest('build'));
// 假设匹配到的文件为 script/lib/jquery.js
// 此时生成的文件路径为 build/lib/jquery.js
gulp.src('script/lib/*.js', {base:'script'}) // 配置了 base 参数,此时 base 路径为 script
.pipe(gulp.dest('build'));
四、gulp.task(name[, deps], fn)
说明:task 方法定义一个 gulp 任务。
name:类型(必填):String,指定任务的名称(不应该有空格)。
deps:类型(可选):StringArray,该任务依赖的任务(注意:被依赖的任务需要返回当前任务的事件流),为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数。
fn:类型(必填):Function,该任务调用的插件操作。
示例:
// 定义一个没有依赖的任务
gulp.task('css', function () {
return gulp.src(['less/style.less'])
.pipe(less())
.pipe(gulp.dest('./css'));
});
// 定义一个有依赖的任务
gulp.task('mincss', ['css'], function () { // 执行完 css 任务后再执行 mincss 任务
return gulp.src(['css/*.css'])
.pipe(minifyCss())
.pipe(gulp.dest('./dist/css'));
});
// 定义一个有多个依赖的默认任务
gulp.task('default', ['css','concat','minifyCss']); // 只要执行 default 任务就相当于把 "css","concat","minifyCss" 这三个任务都执行了
五、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
说明:watch 方法是用于监听文件变化,文件一修改就会执行指定的任务。
glob:需要处理的源文件匹配符路径。类型(必填):String or StringArray。
opts:类型(可选):Object,为一个可选的配置对象,通常不需要用到。
tasks:类型(必填):StringArray,需要执行的任务的名称数组。
cb(event):类型(可选):Function 每个文件变化执行的回调函数。每当监视的文件发生变化时,就会调用这个函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息,type 属性为变化的类型,可以是 added, changed, deleted;path 属性为发生变化的文件的路径。
示例:
gulp.task('watch-less', function () {
gulp.watch('less/**/*.less', ['css']);
});
gulp.task('watch-js', function () {
gulp.watch('js/**/*.js', function (event) {
// 输出发生改变文件的一些信息
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});