Gulp使用【大前端必备知识】

 Gulp 的基本使用

    备注：用 vs code开发 

• yarn init 初始化项目
• yarn add gulp --dev 安装 gulp 
• code gulpfile.js 新建配置文件

//gulp 的入口文件

exports.foo = done => {
    console.log('foo')

    done()
}

exports.default = done => {
    console.log('default')
    done()
}

const gulp = require('gulp')

• yarn gulp foo 运行任务 

 

 Gulp 的组合任务

• 引用 series 和 parallel 来进行任务组合，一般用于 css 和 js 两个任务同时进行编译，或者先进行css , 后进行 js 任务执行
• 举个例子来说明  series 串行 和 parallel 并行 的区别

const { series, parallel } = require('gulp')

const task1 = done => {
    setTimeout(() => {
        console.log('task1......')
        done()
    },1000)
}

const task2 = done => {
    setTimeout(() => {
        console.log('task2......')
        done()
    },1000)
}

const task3 = done => {
    setTimeout(() => {
        console.log('task3......')
        done()
    },1000)
}

//串行：按顺序执行
exports.foo = series(task1, task2, task3)

//并行：同时执行
exports.bar = parallel(task1, task2, task3)

• 运行结果