构建工具 Gulp-lesson2

大家好，我是小鑫同学。一位从事过 Android 开发、混合开发，现在长期从事前端开发的编程爱好者，我觉得在编程之路上最重要的是知识的分享，所谓三人行必有我师。所以我开始在社区持续输出我所了解到、学习到、工作中遇到的各种编程知识，欢迎有想法、有同感的伙伴加我fe-xiaoxin微信交流~

写作背景

Gulp 在编写时和其他构建工具的最大区别就是 Gulp 基于编码而非配置，编码的基础单元又是任务，在上一节学习后我们就可以先一个任务了，那么这一节就详细了解一些任务再 Gulp 中的重要作用吧。

任务：

在 Gulp 中任务按访问的形式可以分为公开任务和私有任务，在使用 gulp 执行构建时读取的就是公开任务列表，所以说我们需要通过 gulp 命令来执行的时候就需要将这个任务导出，就代码这个任务是公开的了。有一些不需要直接通弄过 Gulp 命令执行的任务就不用导出就是私有任务了。

通过下面的代码示例来看一下按访问形式划分的任务：

const { series } = require('gulp');
function clean(cb) {  // body omitted  cb();}
function build(cb) {  // body omitted  cb();}
exports.build = build;exports.default = series(clean, build);

在上面的任务定义中，可已看到 build 任务最终有被导出，所以说 build 是一个公开任务，clean 任务并没有导出，但是被装到了 series 中，但它依然是一个私有任务。

注：代码内容来自 gulp 官网；在以前的版本 gulp 是允许使用_task_ 函数来注册任务的，同样这个特性也有保留，以便我们在无法使用导出模块的语法的特殊状况下使用。

组合任务：

任务按组合的方式可以分为串行任务和并行任务，在 Gulp 中暴露了 series 和 parallel 来将任务进行组合，并且支持组合嵌套，比如说多个并行的任务中的每个任务都可能是一个串行任务或并行任务。

\

下面的代码演示了串行任务的组合方式：

const { series } = require('gulp');
function transpile(cb) {  // body omitted  cb();}
function bundle(cb) {  // body omitted  cb();}
exports.build = series(transpile, bundle);

注：代码内容来自 gulp 官网；

下面的代码演示了并行任务的组合方式：

const { parallel } = require('gulp');
function javascript(cb) {  // body omitted  cb();}
function css(cb) {  // body omitted  cb();}
exports.build = parallel(javascript, css);

注：代码内容来自 gulp 官网；

下面的代码演示了相互组合的任务形式：

const { series, parallel } = require('gulp');
function clean(cb) {  // body omitted  cb();}
function css(cb) {  // body omitted  cb();}
function javascript(cb) {  // body omitted  cb();}
exports.build = series(clean, parallel(css, javascript));

注：代码内容来自 gulp 官网；

结语：

灵活的任务组合方式在构建过程中一定要比配置的编写更加轻松，明晚继续学。