介绍一下gulp 的基本使用方法

安装

Gulp 是自动化构建的工具之一,今天来记录一下他的一些基本使用的方法

初始化项目

yarn init --yes

使用 yarn 来在开发模式下安装

yarn add gulp --dev

在项目目录中新建一个 gulpfile.js 文件 ,他是gulp 的入口文件

这里可以手动创建 ,也可以通过

code gulpfile.js (记得保存)

基本用法

然后我们就可以在这个gulp 的配置文件内进行一些配置

gulpt通过导出函数成员的方式来定义任务

exports.foo = done => {
    console.log('gulp task is working !')
    done()  // 标识任务结束
}

我们可以通过

yarn gulp foo

来执行这个任务

当然我们也可以定义一个默认的任务

exports.default = done=>{
    console.log("default task!")
    done()
}

我们在执行的时候可以使用这个命令

yarn gulp

这样可以执行这个默认的任务

接下来说一下参数done 的作用

gulp 与 grunt 不同的地方在于 gulp默认是以异步的形式进行任务的处理,
grunt 默认是以同步的形式进行处理
这个参数done 是一个函数 ,在任务末位,执行这个函数done( ),来告诉gulp这个任务执行完毕

其他任务声明方式

在gulp 4.0版本以前(目前是4.0) 是通过如下方式来注册任务的

const gulp = require('gulp')
gulp.task('bar',done =>{
    console.log("old version register ")
    done()
})

gulp组合任务

gulp提供了两个api

  1. series 方法 (连续的,用于处理串联的任务)
  2. parallel 方法 (平行的含义,用于处理并行的任务)

举个例子

// 引入 series 和parallel 
const {series,parallel} = require('gulp')
const task1 = done=>{
    setTimeout(()=>{
        console.log('task1 is working!');
        done()
    },2000)
}
const task2 = done=>{
    setTimeout(()=>{
        console.log('task2 is working!');
        done()
    },2000)
}
const task3 = done=>{
    setTimeout(()=>{
        console.log('task3 is working!');
        done()
    },2000)
}

exports.bar = series(task1,task2,task3)
exports.baz = parallel(task1,task2,task3)

我们通过执行结果来计较一下两种方式
这个是串联的结果
在这里插入图片描述
大致流程为

  • 开始1
  • 输出1
  • 结束1
  • 开始2
  • 输出2
  • 结束2
  • 开始3
  • 输出3
  • 结束3
    一个任务做完做下一个任务

我们再来看一下并行的结果
在这里插入图片描述
大致流程为:

  • 开始1
  • 开始2
  • 开始3
  • 输出1 结束1
  • 输出2 结束2
  • 输出3 结束3

是一种首先开启全部任务,然后再逐步输出与结束的形式,大家可以自己体会一下二者的差异性

Gulp 的异步模式

第一种方式

const callback = done =>{
    console.log(" gulp async !")
    done()
}

这是一个最基础的形态,因为gulp默认是按照异步来执行的,所以传入函数done作为参数,并执行 done 作为任务结束标志

exports.callback_error = done =>{
    console.log("error callback")
    done(new Error("task failed!"))
}

当然这个回调函数遵循错误优先的方式

第二种方式:promise 方案

const promise = ()=>{
    console.log('promise task ')
    return Promise.resolve()
}

const promise_error =()=>{
    console.log("promise is running")
    return Promise.reject(new Error("promise is error"))
}

返回promise 的错误回调会直接抛出错误,阻止后续的执行
返回promise 的成功回调会继续执行 ,和done()是一样的,宣布执行结束

第三种方式 :async 与await

const timeout = time =>{
    return new Promise( resolve =>{
        setTimeout( resolve ,time)
    })
}
exports.async = async () =>{
    await timeout(2000)
    console.log('定时器结束后输出的内容')
}

这里用promise 封装了一个promise ,在下面声明任务的时候,把时间作为参数传进去

stream 方式

gulp也支持文件流的形式

// 导入node 的fs 模块
const fs = require('fs')
exports.stream = ()=>{
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')

    readStream.pipe(writeStream)
    return readStream
}

所以 gulp也是一个基于 node 的npm模块

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页