首页 > 代码库 > gulp使用详解

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 : addedchanged 或者deleted.
      event.path: 触发该监听事件的文件路径

gulp使用详解