gulp簡介,基本使用

Gulp.js 是一個自動化構建工具,開發者可以使用它在項目開發過程中自動執行常見任務。

yarn add gulp 

安裝gulp的時候會安裝gulp-cli。gulpfile.js中導出一個函數,最新的gulp中取消了同步代碼模式，每一個任務都是異步任務，最後需要調用回調函數或其他方式標記任務完成。如例子中如果沒有done，會報錯.如果任務名是default，運行時的命令和grunt類似，直接運行yarn gulp即可。

 exports.foo = done => {
     console.log("foo task")
     done() // 標識任務完成
 }

gulp4.0中依然保留了之前版本的任務導出方式,但是這種方式已經不推薦，推薦導出函數的方式使用gulp

 const gulp = require('gulp')

 gulp.task('bar', done => {
     console.log("bar task")
     done()
 })

series,parallel組合任務

gulp可以通過series,parallel來組合任務，series串行執行,parallel並行執行，比如js,css在編譯時就可以並行執行，比如部署任務時先要執行編譯任務再進行其他任務，任務串行執行。基本使用方式如下

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

const task1 = done => {
    setTimeout(() => {
        console.log("task1 working")
        done()
    }, 1000);
}

const task2 = done => {
    setTimeout(() => {
        console.log("task2 working")
        done()
    }, 1000);
}

const task3 = done => {
    setTimeout(() => {
        console.log("task3 working")
        done()
    }, 1000);
}

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

串行

並行

異步任務

常見異步流程操作例子

// 回調方式
exports.callback = done => {
    console.log("callback task")
    done()
}

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

// promise方式
exports.promise = done => {
    console.log("promise task")
    return Promise.resolve()
}

exports.promise_error = () => {
    console.log("promise task")
    return Promise.reject(new Error('task failed'))
}

// async await語法糖方式
// 包裝一個setTimeout為promise方式
const timeout = time => {
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}
exports.async = async () => {
    await timeout(1000)
    console.log("async task")
}

const fs = require("fs")
exports.stream = () => {
    const readStream = fs.createReadStream("package.json") // 讀文件流
    const writeStream = fs.createWriteStream("tmp.txt") // 寫入文件流
    //   pipe方式導入到寫入流，類似一個池子往另外一個池子倒水
    readStream.pipe(writeStream)
    // 結束時機就是readStream end的時候,stream都有一個end事件
    return readStream
}

exports.stream = done => {
    const readStream = fs.createReadStream("package.json") // 讀文件流
    const writeStream = fs.createWriteStream("tmp.txt") // 寫入文件流

    readStream.pipe(writeStream)
    // 這種方式也能正常結束，意味着gulp中只是註冊了這個事件監聽任務結束
    readStream.on('end', () => {
        done()
    })
}

核心工作原理

gulp的官方定義是The streaming build system，實現一個構建管道的方式。
一個利用底層node文件流api模擬工作流:輸入(讀取流)->加工（轉換流）->輸出(寫入流）
例子實現css壓縮

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

// 模擬css文件壓縮
exports.default = () => {
    // 文件讀取流
    const read = fs.createReadStream('normalize.css')
    // 文件寫入流
    const write = fs.createWriteStream('normalize.min.css')

    // 文件轉換流
    const transform = new Transform({
        transform: (chunk, encoding, callback) => {
            // 核心轉換過程實現
            // chunk => 讀取流中讀取到的內容(Buffer)
            const input = chunk.toString()
            const output = input.replace(/\s+/g, "").replace(/\/\*.+?\*\//g, "") // 替換空白字符，然後替換註釋
            callback(null, output)
        }
    })
    // 把讀取出來的文件流導入到寫入流
    read
        .pipe(transform) // 轉換
        .pipe(write) // 寫入
    return read
}

文件操作

gulp的文件流操作API比node的更強大，更容易使用，文件加工的轉換流使用獨立插件。gulp創建構建任務的流程，先通過src方式創建讀取流，藉助插件的轉換流實現文件加工,最後通過gulp提供的dest方法來創建一個寫入流,寫入到目標文件.
上面壓縮css文件的例子，用gulp的api實現例子如下
需要引入兩個插件

yarn add gulp-clean-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/normalize.css').pipe(dest('dist'))
    // gulp的api更為強大，可以使用通配符
    return src('src/*.css')
        .pipe(cleanCss()) // 壓縮
        .pipe(rename({
            extname: '.min.css'
        })) // 重名令
        .pipe(dest('dist')) // pipe到dist目錄
}