大前端 — 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
}
           

更深入的配置這裡寫不下了，貼個位址