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

XUI 發布于2019-08-20 15:43 / 544人閱讀

摘要：舉一個栗子通過上面這段代碼，可以快速替換所有文檔中的為。當前的，擁有等有用的信息。不過當你使用的時候情況不同，執行就相當于告訴，你的插件將會以異步方式運行，所以這個時候你的新的將不會被采納，知道你使用。

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中新增文件。

云服務器 GPU云服務器快速創建 gulp 用快照創建 gulp4

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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