如何编写javascript的gulp插件

 更新时间:2017年02月07日 08:37:29   作者:猴子  
本文主要介绍了使用PMD进行代码审查的方法,具有很好的参考价值,下面跟着小编一起来看下吧

很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化。

再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件”gulp-uglify”,来达到压缩JavaScript文件的目的。

代码如下:

今儿,我们的重点就是,自己也来实现一个gulp插件。

正文

其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp是基于through2开发的)。

例如,我们想要接下来即将编写的插件(暂取名为modify),实现这样的功能:将指定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){
 //如果文件为空,不做任何操作,转入下一个操作,即下一个pipe
 if(file.isNull()){
 console.log('isNull');
 this.push(file);
 return cb();
 }
 //插件不支持对stream直接操作,抛出异常
 if(file.isStream()){
 console.log('isStream');
 this.emit('error');
 return cb();
 }
 //内容转换,处理好后,再转成Buffer形式
 var content = versionFun(file.contents.toString());
 file.contents = new Buffer(content);
 //下面这两句基本是标配,可参考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){
 //如果文件为空,不做任何操作,转入下一个操作,即下一个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(); 
 }
 //内容转换,处理好后,再转成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规范

[3]、gulp高级技巧

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • SpringBoot整合MongoDB完整实例代码

    SpringBoot整合MongoDB完整实例代码

    本文主要介绍了SpringBoot整合MongoDB完整实例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • 详解SpringBoot中的统一功能处理的实现

    详解SpringBoot中的统一功能处理的实现

    这篇文章主要为大家详细介绍了SpringBoot如何实现统一功能处理,文中的示例代码讲解详细,对我们学习或工作有一定借鉴价值,需要的可以参考一下
    2023-01-01
  • java 中设计模式(装饰设计模式)的实例详解

    java 中设计模式(装饰设计模式)的实例详解

    这篇文章主要介绍了java 中设计模式(装饰设计模式)的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • Java设计模式之备忘录模式详解

    Java设计模式之备忘录模式详解

    这篇文章主要介绍了Java设计模式之备忘录模式详解,备忘录模式在不破坏封装性的前提下,捕获一个对象的内部状态并在该对象之外保存这个状态,这样以后就可以将该对象恢复到原先保存的状态,需要的朋友可以参考下
    2023-12-12
  • 详解Kotlin中的面向对象(二)

    详解Kotlin中的面向对象(二)

    这篇文章主要介绍了详解Kotlin中的面向对象(二)的相关资料,需要的朋友可以参考下
    2017-06-06
  • Spring中的HandlerMapping执行流程详解

    Spring中的HandlerMapping执行流程详解

    这篇文章主要介绍了Spring中的HandlerMapping执行流程详解,HandlerMapping在Spring MVC框架的jar包下面,他是处理映射器,为用户发送的请求找到合适的Handler Adapter,它将会把请求映射为HandlerExecutionChain对象,需要的朋友可以参考下
    2023-08-08
  • java使用Jsoup连接网站超时的解决方法

    java使用Jsoup连接网站超时的解决方法

    jsoup是一个非常好的解析网页的包,用java开发的,提供了类似DOM,CSS选择器的方式来查找和提取文档中的内容,提取文档内容时会出现超时的情况,解决方法可看下文
    2013-11-11
  • java基础之Collection与Collections和Array与Arrays的区别

    java基础之Collection与Collections和Array与Arrays的区别

    这篇文章主要介绍了java基础之Collection与Collections和Array与Arrays的区别的相关资料,本文主要说明两者的区别以防大家混淆概念,需要的朋友可以参考下
    2017-08-08
  • java Lombok之@Accessors用法及说明

    java Lombok之@Accessors用法及说明

    这篇文章主要介绍了java Lombok之@Accessors用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Spring 框架中的 Bean 作用域(Scope)使用详解

    Spring 框架中的 Bean 作用域(Scope)使用详解

    Spring框架中的Bean作用域(Scope)决定了在应用程序中创建和管理的Bean对象的生命周期和可见性。本文将详细介绍Spring框架中的Bean作用域的不同类型,包括Singleton、Prototype、Request、Session和Application,并解释它们的特点和适用场景。
    2023-09-09

最新评论