通过替换模板内容来创建新文档的gulp pipe插件

广告位招租
扫码页面底部二维码联系

我在写《原创内容,盗版必究。gulp中文文档原创内容,盗版必究。》的时候,有一些地方确实也不是非常明白,原创内容,盗版必究。【本文首发于唐霜的博客】特别是pipe的部分,其实pipe是no【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。de的stream部分的内容,但是我没有【本文受版权保护】【本文首发于唐霜的博客】深入去理解,所以用起来还有些吃力。这篇文原创内容,盗版必究。转载请注明出处:www.tangshuang.net章主要是写一个插件,可以在gulp的pi本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.netpe中使用。

【未经授权禁止转载】未经授权,禁止复制转载。【原创不易,请尊重版权】

这个插件的功能是替换文档中的特定内容,使著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。用方法如下:

本文版权归作者所有,未经授权不得转载。【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】【原创不易,请尊重版权】
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目录下的文档作著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】为模板,但是对模板中的特定字符串进行替换转载请注明出处:www.tangshuang.net原创内容,盗版必究。,把{{name}}替换为【关注微信公众号:wwwtangshuangnet】'my-name',把【转载请注明来源】{{age}}替换为著作权归作者所有,禁止商业用途转载。10,并把替换完的生成文档到doc目录下。【版权所有,侵权必究】

【原创不易,请尊重版权】【本文首发于唐霜的博客】著作权归作者所有,禁止商业用途转载。

那么paserSnippet怎么实现呢?【原创不易,请尊重版权】【原创内容,转载请注明出处】我们这样写一个paserSnippet.【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.netjs模块:

著作权归作者所有,禁止商业用途转载。【原创内容,转载请注明出处】本文版权归作者所有,未经授权不得转载。【本文首发于唐霜的博客】
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();
    });
}

其中非常关键的,是转载请注明出处:www.tangshuang.netthrough2的使用。through2可以获取pipe【版权所有,侵权必究】未经授权,禁止复制转载。中的stream或buffer,而这里我【原创内容,转载请注明出处】【转载请注明来源】们主要是通过改写buffer从而实现替换【原创不易,请尊重版权】本文版权归作者所有,未经授权不得转载。文档内容。

【本文首发于唐霜的博客】未经授权,禁止复制转载。本文作者:唐霜,转载请注明出处。【本文受版权保护】本文版权归作者所有,未经授权不得转载。
return through.obj(function(file, endcoding, callback) {})

.pipe这个方法会去执行传入的参数(函【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net数),得到一个新的内容(stream/b著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】uffer)并且把它往下一个pipe传。【转载请注明来源】著作权归作者所有,禁止商业用途转载。而这个新的stream/buffer就靠through.obj得到。through2比较厉害的地方就是【作者:唐霜】未经授权,禁止复制转载。,它可以抓取到当前pipe中的内容,并且【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net在调用obj的时候,可以用参数传入到回调著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net函数中去,所以在回调函数中的file就是我们可以进行操作的流。本文作者:唐霜,转载请注明出处。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【关注微信公众号:wwwtangshuangnet】

file.contents就是流的内容,转载请注明出处:www.tangshuang.net未经授权,禁止复制转载。注意,这个时候的内容还仅仅是在内存中,并【作者:唐霜】著作权归作者所有,禁止商业用途转载。没有变成实体。因此,我们可以改变它的内容【作者:唐霜】原创内容,盗版必究。。上面的代码中file.contents = new Buffer(content);就是我们通过我们的方法,重新修改了内容。【版权所有】唐霜 www.tangshuang.net著作权归作者所有,禁止商业用途转载。但是注意,这个时候它还在内存中,还在pi著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】pe的流中,所以下一个pipe进行处理时【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net,一开始接收到的,就是我们新给定的内容。

【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有,禁止商业用途转载。转载请注明出处:www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

通过上面的方法,我们就实现了通过替换模板【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】内容创建新文档的gulp插件。

【版权所有】唐霜 www.tangshuang.net转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。原创内容,盗版必究。本文版权归作者所有,未经授权不得转载。

2016-11-22 5990 ,

为价值买单,打赏一杯咖啡

本文价值59.9RMB
已有2条评论
  1. 鱼猫 2017-08-18 09:48

    感谢文章,解决了我的问题,顺便说一下,主页的FrontEnd拼错了

    • 否子戈 2017-08-18 10:10

      谢谢提醒