构建工具 - gulp (1/3 gulp的基本使用)

一. gulp

gulp是目前最流行的构建工具之一，利用gulp以及其丰富的插件，可以实现强大的项目构建功能，比如scss编译、js编译、文件压缩、开发中热更新、打包等功能。

本文仅简单介绍一下gulp定义任务的几种方式。
后续文章专门记录一下gulp来实现项目构建的具体做法。

二. 使用gulp定义任务（单任务、串行任务、并行任务）并执行

1. 初始化package.json:

npm init -y

2. 安装gulp为开发依赖：

cnpm install gulp --save-dev

3. 添加 gulpfile.js，该文件用于定义gulp任务：

touch  gulpfile.js

4. 在gulpfile.js中定义任务：

// 定义一个任务foo，通过 yarn gulp foo 执行
exports.foo = done => {
    console.log('foo task working')
    done() // 标识任务完成
}

// 定义默认任务，通过 yarn gulp 执行
exports.default = done => {
    console.log('default task work')
    done()
}

/* gulp4.0以前的任务定义方式 已经不推荐了 */
const gulp = require('gulp')
gulp.task('bar', done => {
    console.log('bar work')
    done()
})



// gulp定义组合任务(串行任务 和 并行任务)
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.foo1 = series(task1, task2, task3)
exports.foo2 = parallel(task1, task2, task3)



// gulp异步任务的三种方式
// 方式一 通过回调函数done
exports.callback = done => {
    console.log('callback task')
    done() // 标识任务成功
}
exports.callback_error = done => {
    console.log('callback task 2')
    done(new Error('task failed!')) // 标识任务失败
}


// 方式二 通过Promise.resolve() / Promise.reject()
exports.promise = () => {
    console.log('promise task')
    return Promise.resolve() // 标识成功
}
exports.promise_error = () => {
    console.log('promise task2')
    return Promise.reject(new Errow('task failed!'))
}


// 方式三 通过async/await
const timeout = time => {
    return new Promise(resolve => {
        setTimeout(resolve, time)
    })
}
exports.async = async () => {
    await timeout(1000)
    console.log('async task')
}


// 方式四 通过return stream
const fs = require('fs')
exports.stream = () => {
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStream)
    return readStream
}
// 相当于
exports.stream2 = done => {
    const readStream = fs.createReadStream('package.json')
    const writeStream = fs.createWriteStream('temp.txt')
    readStream.pipe(writeStream)
    readStream.on('end', () => {
        done()
    })
}

三. gulp构建过程的核心原理 读取-转换-写入

// gulp构建过程的核心原理 读取-转换-写入

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

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) // callback是错误优先的函数 第一个参数是错误
        }
    })

    // 把读取出的文件流导入写入文件流
    read.pipe(transform) // 转换
        .pipe(write)     // 写入

    return read
}

四. gulp的文件操作API 和 插件的使用

// gulp的文件操作API + 插件的使用
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'))
}

本文 完。