如何編寫javascript的gulp插件
更新時間：2017年02月07日 08:37:29 作者：猴子
本文主要介紹了使用PMD進(jìn)行代碼審查的方法，具有很好的參考價值，下面跟著小編一起來看下吧
很久以前，我們在"細(xì)說gulp"隨筆中，以壓縮JavaScript為例，詳細(xì)地講解了如何利用gulp來完成前端自動化。
再來短暫回顧下，當(dāng)時除了借助gulp之外，我們還利用了第三方gulp插件”gulp-uglify”，來達(dá)到壓縮JavaScript文件的目的。
代碼如下：
今兒，我們的重點就是，自己也來實現(xiàn)一個gulp插件。
正文
其實，如果只是單純地想要編寫一個gulp插件不難，可以借助through2或者through-gulp來編寫（through-gulp是基于through2開發(fā)的）。
例如，我們想要接下來即將編寫的插件（暫取名為modify），實現(xiàn)這樣的功能：將指定html文件中的{{…}}，全部替換成'Monkey 2 Dorie'。
如下：
下面我們將利用through2以及through-gulp一一道來。
**through2**
'use strict'
var through2 = require('through2');
module.exports = modify;
function modify(){
return through2.obj(function(file, encoding, cb){
//如果文件為空，不做任何操作，轉(zhuǎn)入下一個操作，即下一個pipe
if(file.isNull()){
console.log('isNull');
this.push(file);
return cb();
}
//插件不支持對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)入下一個操作，即下一個pipe
if(file.isNull()){
console.log('file is null!');
this.push(file);
return callback();
}
//插件不支持對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 ');
}
詳情代碼見github.
拓展閱讀
[1]、through-gulp
[2]、gulp規(guī)范
[3]、gulp高級技巧
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
本文主要介紹了SpringBoot整合MongoDB完整實例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
詳解SpringBoot中的統(tǒng)一功能處理的實現(xiàn)
這篇文章主要為大家詳細(xì)介紹了SpringBoot如何實現(xiàn)統(tǒng)一功能處理，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)或工作有一定借鑒價值，需要的可以參考一下2023-01-01
java 中設(shè)計模式（裝飾設(shè)計模式）的實例詳解
這篇文章主要介紹了java 中設(shè)計模式（裝飾設(shè)計模式）的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Java設(shè)計模式之備忘錄模式詳解,備忘錄模式在不破壞封裝性的前提下,捕獲一個對象的內(nèi)部狀態(tài)并在該對象之外保存這個狀態(tài),這樣以后就可以將該對象恢復(fù)到原先保存的狀態(tài),需要的朋友可以參考下2023-12-12
Spring中的HandlerMapping執(zhí)行流程詳解
這篇文章主要介紹了Spring中的HandlerMapping執(zhí)行流程詳解,HandlerMapping在Spring MVC框架的jar包下面,他是處理映射器,為用戶發(fā)送的請求找到合適的Handler Adapter,它將會把請求映射為HandlerExecutionChain對象,需要的朋友可以參考下
2023-08-08 
jsoup是一個非常好的解析網(wǎng)頁的包，用java開發(fā)的，提供了類似DOM，CSS選擇器的方式來查找和提取文檔中的內(nèi)容,提取文檔內(nèi)容時會出現(xiàn)超時的情況，解決方法可看下文
2013-11-11 
java基礎(chǔ)之Collection與Collections和Array與Arrays的區(qū)別
這篇文章主要介紹了java基礎(chǔ)之Collection與Collections和Array與Arrays的區(qū)別的相關(guān)資料,本文主要說明兩者的區(qū)別以防大家混淆概念，需要的朋友可以參考下
2017-08-08 
這篇文章主要介紹了java Lombok之@Accessors用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03 
Spring?框架中的?Bean?作用域（Scope）使用詳解
Spring框架中的Bean作用域（Scope）決定了在應(yīng)用程序中創(chuàng)建和管理的Bean對象的生命周期和可見性。本文將詳細(xì)介紹Spring框架中的Bean作用域的不同類型，包括Singleton、Prototype、Request、Session和Application，并解釋它們的特點和適用場景。
2023-09-09