自定义gulp 插件

目录

• 1. gulp 插件使用的文件流
• 2. vinyl
  • 2.1 定义
  • 2.2 常用属性
• 3. Buffer 类型
  • 3.1 定义
  • 3.2 格式转换
• 4. gulp 定义任务
  • 4.1 gulp 传统写法
  • 4.2 gulp3.9 定义任务写法
• 5. gulp 插件demo
• 6. 参考链接

1. gulp 插件使用的文件流

1. Transform: node stream 中的Transform 流, 即转换流
2. through: 基于Transform 二次实现的库
3. through2: 基于through 二次实现的库(babel 大部分文件流格式均使用该库)

2. vinyl

2.1 定义

vinyl是一个虚拟的文件格式, 表示读取的文件流对象, 该对象不仅可以表示本地的文件流对象, 网络中的所有文件流对象都可以是用vinyl 来处理
vinyl 包含着文件流对象的属性和方法

2.2 常用属性

1. vinyl.path: 文件的绝对路径
2. vinyl.contents: 文件的内容, 通常是Buffer 类型
3. vinyl.extname: 文件的扩展名

3. Buffer 类型

3.1 定义

Buffer 表示一种数据格式, vinyl.contents 通常是Buffer 类型

3.2 格式转换

1. Buffer 转 String: vinyl.contents.toString()
2. String 转 Buffer: Buffer.from(string)

PS:
如果Buffer 表示图片, 那么上面的转换方式将不使用

4. gulp 定义任务

gulp 任务有两种定义的方法, 一种是 gulp 任务的传统写法, 另外一种是gulp3.9 定义任务的语法

4.1 gulp 传统写法

const style = () => {
    // glob 模式
    // 多个目录或者文件可以使用数组的形式
    let src = [
        'static/css/**/*.css',
        'static/css/**/*.scss',
    ]
    let build = 'build/css'
    let stream = gulp.src(src)
        .pipe(gulp.dest(build))

    return stream
}

exports.default = style

4.2 gulp3.9 定义任务写法

gulp.task('default', () => {
    let s = gulp.src('./static/js/**/*')
        .pipe(gulp.dest('./build'))

    return s
})

5. gulp 插件demo

gulp 采用的是流文件的形式来处理文件, 而流文件的数据一般都是Buffer 类型; 自定义gulp 插件时, 一般是将流文件转换为String 数据类型.
其实, 编写gulp 插件的核心内容就是处理字符串, gulp 插件定义的形式可以理解为一种套路即可.

// 一般写 gulp 插件会用 through2 或者 through 这两个库,
// API 更加丰富, 使用更加方便
// 这里使用 node 原生的 Transform 处理文件
const { Transform } = require('stream')

const log = console.log.bind(console)

const contentForFile = (file) => {
    let content = file.contents.toString()
    let extension = file.extname.slice(1)
    let s = ''
    if (extension === 'js') {
        s = content + '
' + '// oulae'
    } else if (extension === 'css' || extension === 'scss') {
        s = content + '
' + '/* oulae */'
    } else {
        s = content + '
' + '# oulae'
    }
    // file.contents 是一个 buffer 类型, 所以把字符串转成 buffer
    let b = Buffer.from(s)
    return b
}

const addInfo = (options) => {
    let t = new Transform({
        objectMode: true,
        transform(file, encoding, callback) {
            file.contents = contentForFile(file)
            return callback(null, file)
        },
    })
    return t
}

module.exports = addInfo 

6. 参考链接

1. vinyl 文档
2. gulp 文档