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

gulp使用详解

2024-09-06 18:21:42   220人阅读

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: 触发该监听事件的文件路径

gulp使用详解


联系
我们