如何編寫(xiě)javascript的gulp插件
很久以前，我們?cè)?細(xì)說(shuō)gulp"隨筆中，以壓縮JavaScript為例，詳細(xì)地講解了如何利用gulp來(lái)完成前端自動(dòng)化。
再來(lái)短暫回顧下，當(dāng)時(shí)除了借助gulp之外，我們還利用了第三方gulp插件”gulp-uglify”，來(lái)達(dá)到壓縮JavaScript文件的目的。
代碼如下：
今兒，我們的重點(diǎn)就是，自己也來(lái)實(shí)現(xiàn)一個(gè)gulp插件。
正文
其實(shí)，如果只是單純地想要編寫(xiě)一個(gè)gulp插件不難，可以借助through2或者through-gulp來(lái)編寫(xiě)（through-gulp是基于through2開(kāi)發(fā)的）。
例如，我們想要接下來(lái)即將編寫(xiě)的插件（暫取名為modify），實(shí)現(xiàn)這樣的功能：將指定html文件中的{{…}}，全部替換成'Monkey 2 Dorie'。
如下：
下面我們將利用through2以及through-gulp一一道來(lái)。
**through2**
'use strict'
var through2 = require('through2');
module.exports = modify;
function modify(){
return through2.obj(function(file, encoding, cb){
//如果文件為空，不做任何操作，轉(zhuǎn)入下一個(gè)操作，即下一個(gè)pipe
if(file.isNull()){
console.log('isNull');
this.push(file);
return cb();
}
//插件不支持對(duì)stream直接操作，拋出異常
if(file.isStream()){
console.log('isStream');
this.emit('error');
return cb();
}
//內(nèi)容轉(zhuǎn)換，處理好后，再轉(zhuǎn)成Buffer形式
var content = versionFun(file.contents.toString());
file.contents = new Buffer(content);
//下面這兩句基本是標(biāo)配，可參考through2的API
this.push(file);
cb();
});
}
function versionFun(data){
return data.replace(/{{something}}/, ' Monkey 2 Dorie ');
}
**through-gulp**
'use strict'
var through = require('through-gulp');
module.exports = modify;
function modify(){
var stream = through(function(file, encoding, callback){
//如果文件為空，不做任何操作，轉(zhuǎn)入下一個(gè)操作，即下一個(gè)pipe
if(file.isNull()){
console.log('file is null!');
this.push(file);
return callback();
}
//插件不支持對(duì)stream直接操作，拋出異常
if(file.isStream()){
console.log('file is stream!');
this.emit('error');
return callback();
}
//內(nèi)容轉(zhuǎn)換，處理好后，再轉(zhuǎn)成Buffer形式
var content = versionFun(file.contents.toString('utf-8'));
file.contents = new Buffer(content, 'utf-8');
this.push(file);
callback();
}, function(callback){
console.log('處理完畢!');
callback();
});
return stream;
}
function versionFun(data){
return data.replace(/{{something}}/, ' Monkey 2 Dorie ');
}
詳情代碼見(jiàn)github.
拓展閱讀
[1]、through-gulp
[2]、gulp規(guī)范
[3]、gulp高級(jí)技巧
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
SpringBoot整合MongoDB完整實(shí)例代碼
本文主要介紹了SpringBoot整合MongoDB完整實(shí)例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
詳解SpringBoot中的統(tǒng)一功能處理的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了SpringBoot如何實(shí)現(xiàn)統(tǒng)一功能處理，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定借鑒價(jià)值，需要的可以參考一下2023-01-01
java 中設(shè)計(jì)模式（裝飾設(shè)計(jì)模式）的實(shí)例詳解
這篇文章主要介紹了java 中設(shè)計(jì)模式（裝飾設(shè)計(jì)模式）的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Java設(shè)計(jì)模式之備忘錄模式詳解,備忘錄模式在不破壞封裝性的前提下,捕獲一個(gè)對(duì)象的內(nèi)部狀態(tài)并在該對(duì)象之外保存這個(gè)狀態(tài),這樣以后就可以將該對(duì)象恢復(fù)到原先保存的狀態(tài),需要的朋友可以參考下2023-12-12
Spring中的HandlerMapping執(zhí)行流程詳解
java使用Jsoup連接網(wǎng)站超時(shí)的解決方法
java基礎(chǔ)之Collection與Collections和Array與Arrays的區(qū)別
java Lombok之@Accessors用法及說(shuō)明
Spring?框架中的?Bean?作用域（Scope）使用詳解