gulp使用详解

gulp提供了四个接口

gulp.src

gulp.dest

gulp.task

gulp.watch

 

++++++++++++++++++++=

gulp.src(globs[,options])

[所谓的 glob 模式是指 shell 所使用的简化了的正则表达式]

该方法就是使用匹配模式获取到相关的文件，例如js，css，image等，然后连接(pipe)输送到相关的插件去做自动化处理。

 

gulp.src('client/templates/*.jade')
  .pipe(jade())
  .pipe(minify())
  .pipe(gulp.dest('build/minified_templates'));

 

例如上面的例子，就是匹配目标文件夹中的任意jade文件，输送到jade()方法处理，之后minify方法处理，最终输出到编译后的目标文件夹！

 

options是其配置选项，

{

  buffer:true,  //是否使用缓冲流？ 默认是buffer流 ， 当设置为false的时候返回的是file.contents作为流。当处理大文件的时候，设置缓冲是很有用的！

  read:true,  //是否读取文件,  当设置为false的时候，会将file.contents设置为null，根本不会读取文件

  base:"client"   //映射的基本参照路径。

}

 

gulp.src('client/js/**/*.js') // 匹配'client/js/somedir/somefile.js' 并且自动设置 `base` 为 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js' gulp.src('client/js/**/*.js', { base:'client' })  // 制定base 为'client'

  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js' 

 

 

 

 

 

 

 

gulp.dest(path[,options])

 

可以被连接处理，并执行写入文件，它会重新发出来所有发送给他的数据，所以它连接到复杂的文件夹。如果文件夹不存在，它也会自动创建！

 

path就是任务处理后输出数据的文件夹(output folder)。也可以是一个函数，只要该函数返回一个路径。

 

options是该方法的配置参数：

cwd: 这是一个字符串，默认值为process.cwd()。 该配置只在提供的输出路径是相对的时候才有效。

mode：默认是0777，设置文件夹的读写属性。

 

 

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

基于Orchestrator，用于定义一个任务。

name：任务的名称

deps：任务的依赖，只有执行完这些依赖，才会执行你的任务fn。默认这是一个同步的执行方案。当然也有异步的解决方案（asynchronous）

fn：该任务的具体执行。如果你要异步该执行，那么你需要指定改任务执行完成的信息

 

一个大概的样子是这样的：

gulp.task('buildStuff', function() {
  // Do something that "builds stuff"
  var stream = gulp.src(/*some source path*/)
  .pipe(somePlugin())
  .pipe(someOtherPlugin())
  .pipe(gulp.dest(/*some destination*/));

  return stream;
  });

 

 

如何异步执行：

 

var gulp = require('gulp');

// 注意fn有一个回调参数，所以当任务完成的时候，会调用这个cb，进程就会知道该任务完成了
gulp.task('one', function(cb) {
    // do stuff -- async or otherwise
    cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
});

// 申明了一个任务two，必须在one完成之后才能执行
gulp.task('two', ['one'], function() {
    // task 'one' is done now
});
//默认我们是申明要执行两个任务，这两个任务会同时初始化，但是任务two会因为有依赖延迟执行
gulp.task('default', ['one', 'two']);

 

除了申明回调的方式来异步执行外，还可以返回stream的方式或者返回一个promise对象来实现

 

 

 

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

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

 

glob匹配被监听的文件

opts，基于gaze的监听方案

包括：interval：监听的时间间隔

     debounceDelay：延迟监听成功的执行

     mode:监听模式：auto,watch,poll

     cwd:监听文件的工作文件夹，默认是process.cwd()

 

task 是监听到变化后执行的任务列表，数组格式

cb  是监听到变化后执行进程：cb(event) 

    event.type : added, changed 或者deleted.

      event.path: 触发该监听事件的文件路径