构建工具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'));

l path 文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径；

l 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

});

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

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

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

  // do something

})

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

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

 

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

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

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

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

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

l 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教程之静态资源压缩