gulp学习(二)-api

学习gulp的用法,首先得学习下gulp的几个常用的api

task

源码:

Gulp继承Orchestrator,task方法就是原型方法add,add原型方法来自Orchestrator

    function Gulp() {
        Orchestrator.call(this);
    }
    util.inherits(Gulp, Orchestrator);
    Gulp.prototype.task = Gulp.prototype.add;

Orchestrator的add方法,前端的代码都不用管,最后面是重要的代码,有一个tasks对象,把name的task添加了进去

    Orchestrator.prototype.add = function (name, dep, fn) {
        ...
        this.tasks[name] = {
            fn: fn,
            dep: dep,
            name: name
        };
        return this;
    };

api:

定义

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

注册一个task,name是task的名字,deps是可选项,就是这个task依赖的tasks,fn是task要执行的函数.

示例

    gulp.task('js3', ,['js1', 'js2'], function(){
        console.log('js3');
    });

上述task的名字js3,依赖js1和js2task,必须js2和js3先运行,才能运行js3,但是js1和js2是并行运行的.

task运行过程

大家知道执行gulp命令就可以执行,上面gulpfile中的task,执行的过程如下

1. 运行gulp命令,其实就是运行gulp模块的/bin/gulp.js

2. 然后执行gulp的task方法

从下面源码可知,原先运行的run方法,现在都是运行task方法,并且gulp后面是可接参数的,后面跟执行的task名称,如果没参数,则默认执行名称为default的task,所以参考gulp学习(一)-介绍安装的示例,默认执行的default task.

    Gulp.prototype.run = function() {
      // `run()` is deprecated as of 3.5 and will be removed in 4.0
      // Use task dependencies instead

      // Impose our opinion of "default" tasks onto orchestrator
      var tasks = arguments.length ? arguments : ['default'];

      this.start.apply(this, tasks);
    };

一般gulpfile多个task这样写:

    'use strict';

    let gulp = require('gulp');

    gulp.task('task1',function(){
       console.log('hello,world1');
    });

    gulp.task('task2',function(){
       console.log('hello,world2');
    });

    gulp.task('default',['task1','task2'],function(){
       console.log('all task finished');
    });

src pipe dest

api:

source 定义

gulp.src(globs[,options])

与globs匹配的文件,可以是string或者一个数组.用来读取文件的内容,输出一个stream可以被pipe插入到别的插件中去。可选项除base外基本不用.

pipe 定义

就是一个管道,用来接受内容的流

dest 定义

gulp.dest(path[,options])

就是最终文件输出的路径.options一般不用.src的base选项,会影响dest的输出路径

示例1

    gulp.task('task1',function(){
      gulp.src('bin/gulp/gulp_src.txt')
      .pipe(gulp.dest('build'));
    });

dest参数是输出目的路径，文件名是原先的文件名.不过src的选项base会影响输出路径.

    gulp.task('task1',function(){
      gulp.src('bin/gulp/gulp_src.txt',{'base':'bin'})
      .pipe(gulp.dest('build'));
    });

原先的输出路径是build/gulp_src.txt,现在时build/gulp/gulp_src.txt。base是输出内容的保留目录。

watch

api:

watch定义

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

一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。
cb回调函数参数event,event.type共有added/changed/deleted三种类型。event.path是内容变动的文件路径

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