gulp（4.x）的简单进阶学习（2）

1. 关于任务（task）

1.1任务（task）的公开（public）和私有（private）类型

被export导出的是任务时公开任务，其他的均为私有任务。一个私有（private）类型的任务（task）在外观和行为上和其他任务（task）是一样的，只是取决于是否被export 导出

function watcher() {
  watch(['src/*.scss'], styleTransform);
  watch(['src/*.js'], scriptTransform);
}


function transformTpl(done) {
  return src('views/**/*.html')
        .pipe(ejs())
        .pipe(dest('html'));
        done();
}
function transformCss(done) {
  return src('src/*.scss')
        .pipe(
          sass({
            outputStyle: 'compact'
          }).on('error', sass.logError)
        )
        .pipe(autoprefixer())
        .pipe(dest('html/dist'));
        done();
}
function transformJs(done) {
  return src('src/*.js')
        .pipe(babel(
          {
            presets: ["@babel/env"],
            plugins: []
          }
        ))
        .pipe(dest('html/dist'));
        done();
}


exports.default = watcher;

exports.getDemo = series(transformCss, transformJs, transformTpl);

由上面的代码可以分析出，watcher任务被export导出可以认为是公开任务，transformTpl和transformCss及transformJs没有被export导出是私有的任务。

1.2组合任务

所谓的组合任务就是把过个独立task通过series()和parallel()方法祝贺成为一个更大的一个操作。而且两个方法可以相互嵌套；
两者的区别：
series()：传入改方法的任务按顺序执行。
parallel()：以最大并发量来运行任务。

function transformTpl(done) {
  return src('views/**/*.html')
        .pipe(ejs())
        .pipe(dest('html'));
        done();
}
function transformCss(done) {
  return src('src/*.scss')
        .pipe(
          sass({
            outputStyle: 'compact'
          }).on('error', sass.logError)
        )
        .pipe(autoprefixer())
        .pipe(dest('html/dist'));
        done();
}
function transformJs(done) {
  return src('src/*.js')
        .pipe(babel(
          {
            presets: ["@babel/env"],
            plugins: []
          }
        ))
        .pipe(dest('html/dist'));
        done();
}


exports.getDemo = series(transformCss, transformJs, transformTpl);
exports.getDemoOther = parallel(transformCss, transformJs, transformTpl);

// 两个组合任务方法分别调用一个任务，则该任务会执行两次。

2. 三个基本方法

2.1 src()

src()接收glob参数，并从文件系统中读取文件然后生成一个stream（node流），他将所有的匹配文件读取到内存中并通过stream进行处理。

2.2 pipe()

pipe()方法是stream所提供的；pipe()就是在一个可读流与可写流之间建立的一个通道。

2.3 dest()

dest()接受一个输出目录作为参数，并且其会产生一个stream，通常作为终止流。

function scriptTransform() {
  return src('src/*.js')
        .pipe(babel(
          {
            presets: ["@babel/env"],
            plugins: []
          }
        ))
        .pipe(dest('dist'));
}

// src() 接受参数，从文件系统中读取src文件夹下的js文件，并生成stream。
// dest() 接受输出目录做为参数，把处理过的文件流写入到当前文件下。
// pipe(fn) pipe方法传入方法的是一个function，这个function作用无非是接受上一个流（stream）的结果，并返回一个处理后流的结果(返回值应该是一个stream对象)

glob参数是什么：由普通字符或统配字符组成的字符串，用于匹配文件路径；

例如：src()方法接受一个glob字符串作为参数，用于确定哪些文件需要操作，glob至少匹配到一个匹配项，否则src()将会报错。

3. 文件监控

watch()方法将globs于task进行关联。对匹配的glob文件进行监控，当这些文件被修改时就立即执行关联的task。

function styleTransform() {
  return src('src/*.scss')
        .pipe(
          sass({
            outputStyle: 'compact'
          }).on('error', sass.logError)
        )
        .pipe(autoprefixer())
        .pipe(dest('dist'));
}

function scriptTransform() {
  return src('src/*.js')
        .pipe(babel(
          {
            presets: ["@babel/env"],
            plugins: []
          }
        ))
        .pipe(dest('dist'));
}

function watcher() {
  watch(['src/*.scss'], styleTransform);
  watch(['src/*.js'], scriptTransform);
}