我在写《gulp中文文档》的时候,有一些地方确实也不是非常明白,特别是pipe的部分,其实pipe是node的stream部分的内容,但是我没有深入去理解,所以用起来还有些吃力。这篇文章主要是写一个插件,可以在gulp的pipe中使用。
这个插件的功能是替换文档中的特定内容,使用方法如下:
var gulp = require('gulp'); var paserSnippet = require('./paserSnippet'); gulp.task('paser',function(){ var params = { name: 'my-name', age: '10' }; gulp.src('./snippets/**/*').pipe(paserSnippet(params)).pipe(gulp.dest('./doc/')); });
然后运行paser这个task:
gulp paser
这样就会以snippets目录下的文档作为模板,但是对模板中的特定字符串进行替换,把{{name}}
替换为'my-name'
,把{{age}}
替换为10
,并把替换完的生成文档到doc目录下。
那么paserSnippet怎么实现呢?我们这样写一个paserSnippet.js模块:
import through from 'through2'; import logger from 'process.logger'; module.exports = function paserSnippet(pairs) { return through.obj(function(file, endcoding, callback) { if(file.isNull()) { this.push(file); return callback(); } if(file.isStream()) { logger.error('gulp error: streaming not supported'); return callback(); } var content = file.contents.toString(); if(pairs && typeof pairs === 'object') { for(let key in pairs) { let value = pairs[key]; content = content.replace('{{' + key + '}}', value) } } file.contents = new Buffer(content); this.push(file); callback(); }); }
其中非常关键的,是through2
的使用。through2可以获取pipe中的stream或buffer,而这里我们主要是通过改写buffer从而实现替换文档内容。
return through.obj(function(file, endcoding, callback) {})
.pipe这个方法会去执行传入的参数(函数),得到一个新的内容(stream/buffer)并且把它往下一个pipe传。而这个新的stream/buffer就靠through.obj
得到。through2比较厉害的地方就是,它可以抓取到当前pipe中的内容,并且在调用obj的时候,可以用参数传入到回调函数中去,所以在回调函数中的file
就是我们可以进行操作的流。
file.contents就是流的内容,注意,这个时候的内容还仅仅是在内存中,并没有变成实体。因此,我们可以改变它的内容。上面的代码中file.contents = new Buffer(content);
就是我们通过我们的方法,重新修改了内容。但是注意,这个时候它还在内存中,还在pipe的流中,所以下一个pipe进行处理时,一开始接收到的,就是我们新给定的内容。
通过上面的方法,我们就实现了通过替换模板内容创建新文档的gulp插件。
感谢文章,解决了我的问题,顺便说一下,主页的FrontEnd拼错了
谢谢提醒