大前端 — gulp 的简单学习

1、gulp 的简单实用

yarn add gulp --dev

在根目录创建一个 gulpfile.js

exports.foo = done => {
    console.log('hello gulp')
    done() // 任务完成  目前的 gulp 只支持 异步的任务，也就是说，一定要执行 这个 done
}

yarn gulp foo  // 执行这里 导出的 gulp 命令

组合任务

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

const task1 = done => {
    setTimeout(() => {
        done()
    }, 100)
}
const task2 = done => {
    setTimeout(() => {
        done()
    }, 100)
}
const task3 = done => {
    setTimeout(() => {
        done()
    }, 100)
}

// 依次执行
exports.foo = series(task1, task2, task3)
// 并行执行
exports.bar = parallel(task1, task2, task3)

除了 前面的 done 之外，其他的异步任务 执行方式，实用 Promise 和 async await

exports.usePromiseResolve = () => {
    return Promise.resolve()
}
exports.usePromiseReject = () => {
    return Promise.reject()
}
exports.useAsync = async () => {
    await Promise.resolve()
}

基础的构建流的过程

const fs = require('fs')
const { Transform } = require('stream')


exports.default = () => {
    // 文件流读入
    const read = fs.createReadStream('./package.json')
    // 文件流写入
    const write = fs.createWriteStream('./src/package.json')

    // 文件转换
    const transform = new Transform({
        transform: (chunk, encoding, callback) => {
            // 核心的转换功能
            const input = chunk.toString()
            const output = input + '//transformed'
            callback(null, output)
        }
    })
    read
      .pipe(transform)  // 先将数据使用 转换，然后再 执行 输出
      .pipe(write)
    return read
}

插件的使用

yarn add gulp-clean-css --dev  // 压缩 css

yarn add gulp-rename // 重命名

const { src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')

exports.default = () => {
    return src('src/*.css')  // 入口
           .pipe(cleanCss())
           .pipe(rename({ extname: '.min.css'}))
           .pipe(dest('dist'))  // 出口
}

yarn gulp  // 默认执行 default  命令

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

... 配置 ...
const compile = parallel(style, script, page)

// 上线之前执行的任务
const build =  series(
  clean,
  parallel(
    series(compile, useref),
    image,
    font,
    extra
  )
)

const develop = series(compile, serve)

module.exports = {
  clean,
  build,
  develop
}

更深入的配置这里写不下了，贴个地址