构建工具gulp之主要API

上期回顾:构建工具gulp之入门指南

上期我们了解了gulp的一些入门知识,本期将进一步了解gulp,为大家讲述gulp之主要API的内容。

gulp.src(globs[, options])

src方法用于产生数据流。它的参数表示所要处理的文件,这些指定的文件会转换成数据流。

src方法的参数可以是一个字符串:

gulp.src('images/*.{png,jpg,gif,ico}')

    .pipe(imagemin())

    .pipe(gulp.dest('dist/images'));

src方法的参数还可以是一个数组,用来指定多个成员:

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

globs参数通配符路径匹配规则如下:

src方法用于产生数据流。它的参数表示所要处理的文件,这些指定的文件会转换成数据流。

src方法的参数可以是一个字符串:

gulp.src('images/*.{png,jpg,gif,ico}')

    .pipe(imagemin())

    .pipe(gulp.dest('dist/images'));

src方法的参数还可以是一个数组,用来指定多个成员:

gulp.src(['js/**/*.js', '!js/**/*.min.js'])

globs参数通配符路径匹配规则如下:

js/app.js:指定具体的文件名;

*:匹配所有文件,例:src/*.js(包含src下的所有js文件);

**:匹配0个或多个子文件夹,例:src/**/*.js(包含src下0个或多个子文件夹下的js文件);

{}:匹配多个属性,例:src/{a,b}.js(包含a.js和b.js文件),src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件);

!:排除文件,例:!src/a.js(不包含src下的a.js文件);

?:匹配文件路径中的一个字符,例:js/a?.js 能匹配 js/ab.js,不能匹配js/a.js;

[...]:匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法。例:js/a[0-3].js

,匹配js目录下以a开头,第二个字符为0-3之间(包括0和3)的js文件。若改为 ["js/[^ab].js"],则匹配 js/c.js,不匹配 js/cd.js、js/ac.js;

?(pattern|pattern|pattern):匹配多个 pattern 中 0 或 1 个(精确匹配,不可以组合)。例:js/?(a|b).js,匹配 js 目录下的 a.js、b.js,不匹配 ab.js

+(pattern|pattern|pattern):至少匹配多个 pattern 中的一个。例:js/+(a|b)b.js,匹配 js 目录下的 ab.js、bb.js、ababab.js,不能匹配abcd.js(也就是说:只允许匹配出现在范围内的字符) ,也不能像 js/*(a|b)b.js 那样匹配 b.js。

*(a|b|c):匹配括号中多个 pattern 中0或任意多个(pattern可相互组合)。例:js/*(a|b|c).js,匹配 js 目录下的 a.js、ab.js、abc.js、ba.js,不匹配 abcd.js(也就是说:只允许匹配出现在范围内的字符)。

@(pattern|pattern|pattern):匹配多个 pattern 中的任意一个(即不可以组合,且不能为空或大于1个)。例:js/@(a|b)b.js,匹配 js 目录下的ab.js、bb.js,不匹配 b.js、abb.js、abc.js。

options类型(可选),有3个属性buffer、read、base;

options.buffer:(默认:true)设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;

options.read:(默认:true)设置false,将不执行读取文件操作,返回null;

options.base:设置输出路径以某个路径的某个组成部分为基础向后拼接;

gulp.dest(path[, options])

dest方法是指定处理完后文件输出的路径;

gulp.src('images/*.{png,jpg,gif,ico}')

    .pipe(imagemin())

    .pipe(gulp.dest('dist/images'));

path 文件将被写入的路径(输出目录)。也可以传入一个函数,在函数中返回相应路径;

options  配置对象,有2个属性cwd、mode;

options.cwd:类型:String,默认:process.cwd():前脚本的工作目录的路径 当文件输出路径为相对路径将会用到;

options.mode:类型:String,默认:0777 指定被创建文件夹的权限;

gulp.task(name[, deps], fn)

task定义一个gulp任务;

gulp.task('taskname', function() {

  // do something

});

name 任务的名字,如果你需要在命令行中运行你的某些任务,那么,请不要在名字中使用空格

deps一个包含任务列表的数组,这些任务会在你当前任务运行之前完成

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {

  // do something

})

f该函数定义任务所需要执行的一些操作。通常来说,它会是这样中形式

gulp.src().pipe(taskFn())

gulp.watch(glob [, opts], tasks)

watch监视文件,并且可以在文件发生改动时候做一些事情。

glob   需要处理的源文件匹配符路径

opts   类型(可选):Object具体参看gaze  https://github.com/shama/gaze

tasks (类型: Array)需要在文件变动后执行的一个或者多个通过gulp.task() 创建的 task 的名字

cb(event):  类型(可选):Function每个文件变化执行的回调函数,callback会被传入一个名为 event的对象,这个对象描述了所监控到的变动

gulp.watch('js/**/*.js', function(event) {

  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');

});

event.type 发生的变动的类型:added, changed 或者 deleted。

event.path 触发了该事件的文件的路径。

本文中主要把gulp的api介绍完了,基本上gulp也算是掌握了。 下一篇文章我们将逐步去了解各种任务的插件使用。

    

下期预告

gulp教程之静态资源压缩

猜你喜欢

转载自blog.csdn.net/RJ0024/article/details/85000010