用gulp-bufferify快速创建你的gulp插件

XUI 发布于2019-08-20 15:43 / 419人阅读

摘要：举一个栗子通过上面这段代码，可以快速替换所有文档中的为。当前的，拥有等有用的信息。不过当你使用的时候情况不同，执行就相当于告诉，你的插件将会以异步方式运行，所以这个时候你的新的将不会被采纳，知道你使用。

gulp-bufferify是我之前写的一个gulp插件，其实它没有实际的功能性用处，但是利用它可以快速实现一个gulp插件。举一个栗子：

import bufferify from "gulp-bufferify"
gulp.src("./**/*.txt")
    .pipe(bufferify(content => content.replace(/sam/g, "tom")))
    .pipe(gulp.dest("."))

通过上面这段gulp代码，可以快速替换所有txt文档中的sam为tom。可以说，每一个gulp-bufferify就是一个插件，你可以利用它完成你想要的功能。

我们来看看他的使用方法：

let factory = (content, file, context, notifier) => {}
bufferify(factory)

工厂函数factory有四个参数：

content

经过toString()的文档内容，一般在处理文本类型的文档时可以直接使用。

file

当前buffer的file，拥有file.path, file.contents, file.clone()等有用的信息。

context

管道中的上下文，相当于stream中的this。可以通过它实现文件的添加修改和删除。具体的话，你还得知道stream的相关知识。

notifier

用在异步处理中，通知生成器，使用方法如下：

.pipe(bufferify((content, file, context, notifier) => {
    let callback = notifier()
    setTimeout(() => callback(), 3000)
}))

上面这段代码是异步处理的，当callback()执行时，stream才会进入下一个管道。

工厂函数的返回值应该是新的content，当你返回一个新的content的时候，这个buffer的内容就会被新的content替换（buffer文件是文本文件）。

而如果你返回的值为非真时，原始的content将被使用。

不过当你使用notifier的时候情况不同，执行notifier()就相当于告诉gulp-bufferify，你的插件将会以异步方式运行，所以这个时候你return的新的content将不会被采纳，知道你使用callback()。callback的使用方法和though2的callback使用方法是一样的，假如你修改了buffer文件，必须采用如下的形式：

.pipe(bufferify((content, file, context, notifier) => {
    let callback = notifier()
    let newcontent = content.replace("you", "me")
    file.contents = new Buffer(newcontent)
    setTimeout(() => callback(null, file), 3000)
}))

在gulp-bufferify中，真正改变stream的，主要是bufferify函数的返回值和context，返回新的content将改变file.contents，而使用context则可以在stream中新增文件。

混合云专线服务快速创建 gulp 用快照创建 gulp4

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82449.html

20分钟gulp快速入门

摘要：所以出现了各种前端构建化工具也应运而生等已经成为现在前端开发工程师的必备技能之一。结语今天的分享就告一段落啦希望能对大家有所帮助。在互联网告诉发展的今天，自node出现后，我们前端也越来越大（心里美美哒~），同样带来的Web业务日益复杂化和多元化，模式也都想webPage模式转向webApp模式，拼几个页面搞几个jquery的插件就能搞一个完成一个项目的日子已经是很久远的曾经了，而且...

RichardXG 2019-08-22 15:06 评论0 收藏0
做一个合格的前端，gulp资源大集合

摘要：承接前一篇做一个合格的前端，自动化构建工具入门教程故而整理了如下插件资源大全。接下来我会逐一开源观点网开发过程中的前后端技术，如全文索引自定义富文本编辑器图片上传压缩水印等等。承接前一篇《做一个合格的前端，gulp自动化构建工具入门教程》故而整理了如下gulp插件资源大全。**【我的新作观点网：http://www.guandn.com (观点网是一个猎获新奇、收获知识、重在独立思考...

Baoyuan 2019-08-22 13:54 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

HmyBmny 2019-08-20 18:12 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

jhhfft 2019-08-29 12:58 评论0 收藏0
Glup快速入门整理

摘要：下载打包插件引入引入的插件是个方法，必须记住调用。神来之笔其他的插件不用再引入了使用方法所有的插件用引出，其他插件的方法名统一为插件的功能名字即插件名字的最后一部分如将转换为将转换为的文件输出到下实时刷新 Gulp介绍中文主页: http://www.gulpjs.com.cn/ gulp是与grunt功能类似的前端项目构建工具, 也是基于Nodejs的自动任务运行器能自动化...

ysl_unh 2019-08-01 17:12 评论0 收藏0