gulp api

发表于   |   分类于   |     |   阅读次数

工作方式、流程

gulp 使用 node.js 中的 流stream ；
方式：获取 stream -> 通过 pipe() 方法将其导入到功能插件中 -> 经处理后，可继续导入到其它插件、或直接通过 dest() 写入文件。

流程： gulp.src() 获取到要处理的文件流 -> pipe() 方法将其导入到相应的 gulp 插件 -> 再通过 pipe() 导入到 gulp.dest() -> gulp.dest() 把处理后流中的内容写入到指定文件中。

globs 匹配

在用gulp.src() 获取 流stream 、gulp.dest()写入文件的时候，我们要找到对应文件的路径、文件名，这就需要熟悉 globs 匹配规则了。
gulp 内部使用了 node-glob 模块来实现其文件匹配功能。
glops 匹配跟 js 正则相似。直接参考例子更易懂：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
* 能匹配 a.js,x.y,abc,abc/,但不能匹配a/b.js
*.* 能匹配 a.js,style.css,a.b,x.y
*/*/*.js 能匹配 a/b/c.js,x/y/z.js,不能匹配a/b.js,a/b/c/d.js
** 能匹配 abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件
**/*.js 能匹配 foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js
a/**/z 能匹配 a/z,a/b/z,a/b/c/z,a/d/g/h/j/k/z
a/**b/z 能匹配 a/b/z,a/sb/z,但不能匹配a/x/sb/z,因为只有单**单独出现才能匹配多级目录
?.js 能匹配 a.js,b.js,c.js
a?? 能匹配 a.b,abc,但不能匹配ab/,因为它不会匹配路径分隔符
[xyz].js 只能匹配 x.js,y.js,z.js,不会匹配xy.js,xyz.js等,整个中括号只代表一个字符
[^xyz].js 能匹配 a.js,b.js,c.js等,不能匹配x.js,y.js,z.js

src 获取流

gulp.src() 用来获取流的，但这个流里的内容不是原始的文件流，而是一个虚拟文件对象流，它只存储着原始文件的路径、文件名、内容等信息。其语法为：

1
gulp.src(globs[, options]);

参数 globs 匹配模式，类型可为 string array，可指定一个具体文件路径、可用数组放多个匹配模式。

1
2
//数组的方式匹配多种文件
gulp.src(['js/*.js','css/*.css','*.html'])

参数 options 可选，有三个选项：

  1. options.buffer；类型： Boolean； 默认值： true；略
  2. options.read；类型： Boolean； 默认值： true；略
  3. options.buffer；类型： String ；输出路径；
1
2
3
4
5
6
7
8
9
10
11
//不设置base，base的值默认为模式前的全部（即`**/*`前面的`client/js/`）；
//build替换 `client/js`
gulp.src('client/js/**/*.js')   //src匹配 'client/js/somedir/somefile.js' ;
  .pipe(minify())
  .pipe(gulp.dest('build'));    //写入 'build/somedir/somefile.js' 将`client/js/`替换为build
//设置base的值为 'client'
//build替换 'client'
gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js' 将`client`替换为build

dest 写入文件

gulp.dest() 指定被处理后的文件的输出路径，语法、实例：

1
2
3
4
5
6
7
8
9
//语法
gulp.dest(path[,options])
//实例
gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

参数一 path： 类型(必填)：String or Function 指定文件输出路径；
参数二 options：

  1. options.cwd；类型： String ；默认值： process.cwd()；只在所给的输出目录是相对路径时候有效。
  2. options.mode；类型： String ；默认值： 0777；用以定义所有在输出目录中所创建的目录的权限。

watch 监视文件

gulp.watch() 监视到文件变化后执行相应的任务；语法有2种：

1
2
gulp.watch(glob[, opts], tasks); 
gulp.watch(glob [, opts, cb])

glop 匹配模式；opts 可选，很少用；tasks 变化后要执行的任务；实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
//实例1：文件变化后要执行的任务，数组；
gulp.task('uglify',function(){
  //do something
});
gulp.task('reload',function(){
  //do something
});
gulp.watch('js/**/*.js', ['uglify','reload']);
//实例2：每次变动需要执行的 callback；传入一个名为 event 的对象，这个对象描述了所监控到的变动（event.type：added、changed、 deleted；event.path：该文件路径）
gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

task 定义任务

gulp.task() ，语法：

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

name 任务名； deps 当前任所依赖的其它任务，数组，可选；fn 执行该任务所调用的插件操作，可选。实例：

1
2
3
4
5
6
7
8
9
10
11
12
gulp.task('mytask');
gulp.task('mytask', function () {
   //dosomething
});
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  //dosomething
});
//执行多个任务时，控制执行顺序：
gulp.task('default',['one','two','three']);

run 执行任务

gulp.run() 表示要执行的任务：

1
2
3
4
//使用单个参数的形式传递多个任务
gulp.task('end',function(){
    gulp.run('task1','task3','task2');
});

任务是尽可能多的并行执行的，并且可能不会按照指定的顺序运行。