前面几篇文章我们一起聊了几种类型的流，这篇文章主要来分析一下如何写一个gulp插件。

前言

前端工程化对于FE来说是一项必不可少的能力，而gulp在前端工程化中可以为FE提供很多重要的帮助，比如编译、压缩、同步文件等等。gulp的使用是非常简单的，文档写的也比较清楚，大部分人瞜一眼都能会用，学习成本比较低。但是大多数情况下我们都是使用别人提供的插件，如果网上找不到适合我们自己项目的插件时，该如何去实现一个gulp插件呢？

gulp源码分析

我们先看一个简单的应用例子，如下图：

图1中我们定义了两个任务，图2中分别运行了一下，都能正确打印出结果（使用本地gulp便于调试源码）。可以看出来gulp是任务型的，每个可以从文件中导出的函数就是一个任务，管理这些任务使用的逻辑都封装在了undertaker这个模块里，这个模块不需要我们去了解细节，知道它是干什么的就可以了。

gulp主要用于处理文件，现在图1中是没什么逻辑的，我们再加一点逻辑，如下图：

图3中的逻辑主要是把src读到的文件修改一下名字然后输出到dist目录，逻辑中我们使用了gulp提供的两个方法src和dest，根据之前学习Stream的经验，很显然前者至少会输出一个可读流，后者至少会输出一个可写流，我们现在去看看gulp的源码！

如图4，进入gulp源码找到src和dest方法，我们发现它两是vinyl-fs提供的，我们再移步vinyl-fs这个包！

图5所示就是src方法的具体实现，其最终会返回一个transform流（即return的结果），streams数组中几个元素也都是transform流，它们运行的顺序是上一个元素处理后的结果会交给下一个元素处理。

红色箭头标号为1的流主要是通过glob获取所有要处理的文件路径，然后交给标号为2的流，这个wrapVinyl主要作用是为每个要处理的文件生成一个对应的对象，这个对象上挂载了文件的信息比如文件路径、文件内容等，还挂载了几个方法比如文件是否是buffer、文件是否是stream等，生成这个对象用到的逻辑都封装到了vinyl这个包中。

标号为3的这个流主要作用就是读取文件的内容，然后将文件的内容通过contents属性设置到上面所说的对象上。

streams数组中其他几个元素对于我们学习如何写插件影响不大，就不做介绍了！

说到这里我想gulp的处理流程应该很清楚了，就是为每个要处理的文件生成一个对象挂载其自身的各种信息包括路径、内容等，后续插件（各种transform流）只要处理这个对象就可以了，最后通过dest方法输出新的文件。

使用buffer处理插件

直接看一个插件例子，如下：

图6中开发一个名字为gulpPlugin的插件，返回一个transfrom流，我们只需要实现_transform方法就可以了，其中参数originalFile就是之前提到的那个对象！

我们读取一个名为1.json的文件，originalFile.contents默认是buffer类型，此时我们将内容替换为“祝福我的祖国越来越强大！”，同时也将文件后缀修改为.js，运行后，你会发现dist目录下已经生成了1.js文件，并且内容也符合预期！

使用stream处理插件

看下面例子，

图7中在src里面将buffer选项置为false，运行一下你会发现originalFile.contents的类型已经变为了stream，此时该怎么处理呢？

我们可以再创建一个transform流，如下：

图8中新创建了一个transform流——innerStream，在这个流的内部我们可以修改文件的内容，并且把这个流传递下去。

图8中一共出现了两个原生transfrom流，代码显得有点冗余，为了解决这个问题，我们可以使用through2这个模块，它也会生成一个transfrom流，只是为objectMode和highWaterMark设置了默认值，我们利用这个模块修改一下代码逻辑。

如图9是利用through2模块修改后的逻辑，现在看起来代码优雅了许多！

在插件的逻辑中，开发者是需要判断数据内容的类型是buffer还是stream，因为插件并不清楚上游会传给它什么数据，所以就要做兼容处理，而最后的dest也会去做类型判断！

总结

这篇文章主要简单介绍了gulp的源码和如何写一个插件，这是一个中级程序员应该有的能力！想写好一个gulp插件，可以按照gulp的插件规范要求来写，比如命名、错误处理、单测等等。

另外，如果你还不了解buffer和stream，我想你在写插件（包括webpack等其他工具）时只能照葫芦画瓢，并不能很好的驾驭！所以如果你是这种情况，可以先看看我之前的文章，再来学习如何写插件也不迟！

喜欢我的文章就关注我吧，后续会更多干货输出，让我们一起学习，共同成长！