gulp学习

前提安装node环境
使用npm安装gulp命令行工具
安装之前，如果已经安装了，为了学习，可以卸载

npm rm --global gulp

执行如下命令进行安装

npm install --global gulp-cli

创建一个项目，来练习使用gulp

npm init

安装gulp，作为项目开发时的依赖

npm install --save-dev gulp

创建gulpfile.js 文件
文件内容如下：

function defaultTask(){
    console.log("hello huangbaokang")
}

exports.default = defaultTask

执行gulp命令，如下：

以上就算gulp入门了，学好这个工具，重在掌握各个api接口，然后结合各大工具调试，如代码压缩，代码修改监控，掌握其自动化构建的原理。

Gulpfile 详解

gulpfile 是项目目录下名为 gulpfile.js （或者首字母大写 Gulpfile.js，就像 Makefile 一样命名）的文件，在运行 gulp 命令时会被自动加载。在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API，除此之外，纯 JavaScript 代码或 Node 模块也会被使用。任何导出（export）的函数都将注册到 gulp 的任务（task）系统中。

Gulpfile 转译

你可以使用需要转译的编程语言来书写 gulpfile 文件，例如 TypeScript 或 Babel，通过修改 gulpfile.js 文件的扩展名来表明所用的编程语言并安装对应的转译模块。

对于 TypeScript，重命名为 gulpfile.ts 并安装 ts-node 模块。
对于 Babel，重命名为 gulpfile.babel.js 并安装 @babel/register 模块。
针对此功能的高级知识和已支持的扩展名的完整列表，请参考 gulpfile 转译 文档。

创建任务
每个 gulp 任务（task）都是一个异步的 JavaScript 函数，此函数是一个可以接收 callback 作为参数的函数，或者是一个返回 stream、promise、event emitter、child process 或 observable类型值的函数

任务分公开任务和私有任务，公开任务可以通过gulp命令直接调用，私有任务不能直接调用，可以从gulpfile中导出即可。

const {series} = require('gulp')
function defaultTask(){
    console.log("hello huangbaokang")
}

function privateTask(cb){
    console.log("private task")
    cb()
}

function publicTask(cb){
    console.log("public  task")
    cb()
}

exports.publicTask = publicTask;
exports.default = series(privateTask,publicTask)

执行结果可以看出，publicTask可以直接调用（因为exports了），而privateTask没有被exports，所以不能直接调用，但是可以用于内部组合中

以上series是组合中的一种，这种按顺序执行，如果希望以最大并发来运行任务，可以使用parallel()

const { parallel } = require('gulp');

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

异步执行

任务完成通知
当从任务（task）中返回 stream、promise、event emitter、child process 或 observable 时，成功或错误值将通知 gulp 是否继续执行或结束。如果任务（task）出错，gulp 将立即结束执行并显示该错误。

当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。

返回stream

const { src,dest } = require("gulp")

function streamTask(){
    // 把当前目录下的所有js文件写入到output目录，没有这个目录，将自动创建
    return src("*.js").pipe(dest('output'));
}

exports.default = streamTask;

返回promise

function promiseTask(){
    return Promise.resolve("hello huangbaokang");
}

exports.default = promiseTask;

返回event emitter

const {EventEmitter} = require("events")
function eventEmitterTask(){
    const emitter = new EventEmitter();
    setTimeout(()=> emitter.emit("finish"),2500);
    return emitter;
}

exports.default = eventEmitterTask;

返回子进程（child process）

const {exec} = require('child_process')

function childProcessTask(){
    return exec('date');
}

exports.default = childProcessTask;

返回callback
如果任务（task）不返回任何内容，则必须使用 callback 来指示任务已完成。

function callbackTask(cb) {
  // `cb()` should be called by some async work
  cb();
}

exports.default = callbackTask;

如需通过 callback 把任务（task）中的错误告知 gulp，请将 Error 作为 callback 的唯一参数。

function callbackError(cb) {
  // `cb()` should be called by some async work
  cb(new Error('kaboom'));
}

exports.default = callbackError;