Gulp中文api(常用api)

此笔记记录了使用过程中最常用的Gulp api,包含gulp.srcgulp.destgulp.taskgulp.watch

gulp.src(globs[, options])

说明:src方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件;

globs: 需要处理的源文件匹配符路径。类型(必填):String or StringArray
通配符路径匹配示例:

src/a.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文件);

var gulp = require('gulp'),
    less = require('gulp-less');
 
gulp.task('testLess', function () {
    //gulp.src('less/test/style.less')
    gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

options: 类型(可选):Object,有3个属性bufferreadbase

options.buffer: 类型:Boolean 默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;
options.read: 类型:Boolean 默认:true 设置为false,将不执行读取文件操作,返回null;
options.base: 类型:String。 设置输出路径以某个路径的某个组成部分为基础向后拼接,具体看下面示例:

gulp.src('client/js/**/*.js') 
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // Writes 'build/js/somedir/somefile.js'

当我们没有在gulp.src()方法中配置base属性时,base的默认值为通配符开始出现之前那部分路径,例如:

gulp.src('app/src/**/*.css') //此时base的值为 app/src

上面我们说的gulp.dest()所生成的文件路径的规则,其实也可以理解成,用我们给gulp.dest()传入的路径替换掉gulp.src()中的base路径,最终得到生成文件的路径。

gulp.src('app/src/**/*.css') //此时base的值为app/src,也就是说它的base路径为app/src
     //设该模式匹配到了文件 app/src/css/normal.css
    .pipe(gulp.dest('dist')) //用dist替换掉base路径,最终得到 dist/css/normal.css

所以改变base路径后,gulp.dest()生成的文件路径也会改变

gulp.src('script/lib/*.js') //没有配置base参数,此时默认的base路径为script/lib
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //生成的文件路径为 build/jquery.js

gulp.src('script/lib/*.js', {base:'script'}) //配置了base参数,此时base路径为script
    //假设匹配到的文件为script/lib/jquery.js
    .pipe(gulp.dest('build')) //此时生成的文件路径为 build/lib/jquery.js    

gulp.dest(path[, options])

dest方法是指定处理完后文件输出的路径;

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: 类型(可选):Object,有2个属性cwdmode

options.cwd: 类型:String 默认:process.cwd():前脚本的工作目录的路径 当文件输出路径为相对路径将会用到;
options.mode: 类型:String 默认:0777 指定被创建文件夹的权限;

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

task定义一个gulp任务;

name: 类型(必填):String 指定任务的名称(不应该有空格);

deps: 类型(可选):StringArray,该任务依赖的任务(注意:被依赖的任务需要返回当前任务的事件流,请参看下面示例);

gulp.task('testLess', function () {
    return gulp.src(['less/style.less'])
        .pipe(less())
        .pipe(gulp.dest('./css'));
});

gulp.task('minicss', ['testLess'], function () { //执行完testLess任务后再执行minicss任务
    gulp.src(['css/*.css'])
        .pipe(minifyCss())
        .pipe(gulp.dest('./dist/css'));
});

fn: 类型(必填):Function 该任务调用的插件操作;

多个任务时控制任务执行的顺序

gulp中执行多个任务,可以通过任务依赖来实现。例如我想要执行one,two,three这三个任务,那我们就可以定义一个空的任务,然后把那三个任务当做这个空的任务的依赖就行了:

//只要执行default任务,就相当于把one,two,three这三个任务执行了
gulp.task('default',['one','two','three']);

注意: 如果任务相互之间没有依赖,任务会按你书写的顺序来执行,如果有依赖的话则会先执行依赖的任务。
但是如果某个任务所依赖的任务是异步的,就要注意了,gulp并不会等待那个所依赖的异步任务完成,而是会接着执行后续的任务。

实现异步的几种方法:

  • 第一:在异步操作完成后执行一个回调函数来通知gulp这个异步任务已经完成,这个回调函数就是任务函数的第一个参数。
gulp.task('one',function(cb){ //cb为任务函数提供的回调,用来通知任务已经完成
  //one是一个异步执行的任务
  setTimeout(function(){
    console.log('one is done');
    cb();  //执行回调,表示这个异步任务已经完成
  },5000);
});

//这时two任务会在one任务中的异步操作完成后再执行
gulp.task('two',['one'],function(){
  console.log('two is done');
});
  • 第二:定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况。
gulp.task('one',function(cb){
  var stream = gulp.src('client/**/*.js')
      .pipe(dosomething()) //dosomething()中有某些异步操作
      .pipe(gulp.dest('build'));
    return stream;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});
  • 第三:返回一个promise对象,例如
var Q = require('q'); //一个著名的异步处理的库 https://github.com/kriskowal/q
gulp.task('one',function(cb){
  var deferred = Q.defer();
  // 做一些异步操作
  setTimeout(function() {
     deferred.resolve();
  }, 5000);
  return deferred.promise;
});

gulp.task('two',['one'],function(){
  console.log('two is done');
});

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

watch方法是用于监听文件变化,文件一修改就会执行指定的任务;

glob: 需要处理的源文件匹配符路径。类型(必填):String or StringArray;
opts: 类型(可选):Object 具体参看https://github.com/shama/gaze;
tasks: 类型(必填):StringArray 需要执行的任务的名称数组;
cb(event): 类型(可选):Function 每个文件变化执行的回调函数;

gulp.task('watch1', function () {
    gulp.watch('less/**/*.less', ['testLess']);
});

gulp.task('watch2', function () {
    gulp.watch('js/**/*.js', function (event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

cb参数为一个函数。每当监视的文件发生变化时,就会调用这个函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息,type属性为变化的类型,可以是added,changed,deleted;path属性为发生变化的文件的路径

gulp.watch('js/**/*.js', function(event){
    console.log(event.type); //变化类型 added为新增,deleted为删除,changed为改变 
    console.log(event.path); //变化的文件的路径
}); 

发表评论

电子邮件地址不会被公开。 必填项已用*标注