javascript - gulp插件编写处理多文件错误

问题描述

问 题

需要处理多个文件,因为需要全部扫描全部文件,然后单独对文件进行修改,应该是相当于是用2次流操作才行,但扫描出来的数据就没办法保存.
有什么办法返回数据?难道要写2个流(缺少第一个流扫描出的结果)?
多文件处理的时候,把结果放到最后面一次生成也报错
node 6.0+版本以上

var through = require('through-gulp');

// exporting the plugin 
module.exports = sample;


  var tag = []; //存放扫描的位置标签
  var tagDate = []; //存放标记内容区域
  var noTag;
  
  var i = 0;
  var y = 0;
  var fileStorage = [];
function sample() {
  // creating a stream through which each file will pass
  
  
  var stream = through(function(file, encoding,callback) {
    // do whatever necessary to process the file
    if (file.isNull()) {

    }
    if (file.isBuffer()) {
        //console.log('文件处理')
        //var data = Buffer.concat([file.contents]).toString();

        var data = file.contents.toString();
        // 保存传递进来的数据
        scanTag(data)

        file.contents = new Buffer(data);
        
        fileStorage.push(file)
        
        //this.push(file);

    }
    if (file.isStream()) {

    }
    // just pipe data next, or just do nothing to process file later in flushFunction
    // never forget callback to indicate that the file has been processed.
      
      callback();
    }, function(callback) {
        var result = '';
        var final = null;
      fileStorage.forEach(function(file,key){
          var data = file.contents.toString();
          result+= replaceTag(data);
            console.log('file:',file);
            console.log('data:',data);
      });
      
       final = new Buffer(result);
       this.push(final);
     
      callback();
    })
    
  // returning the file stream
  return stream;
};

function scanTag(data){
    return data.replace(/<!--\s?@block:([\w\-\_]+)\s?-->\s*((\s|[^@])*)\s?@end\s?-->/g,function($1,$2,$3){
      console.log('$1=>',$1)  // <!-- @block: tag -->
      console.log('$2=>',$2) //tag
      console.log('$3=>',$3)  // html+ <--    
      
      var lastIndex = $3.indexOf("<!--");
      var newString = '';
      
      
      if(lastIndex > 10){
          newString = $3.slice(0,lastIndex)
          console.log('$3--slice=>',newString)
      }
      
      tag.push($2); //存入tag
      tagDate.push(newString); //存入html内容
      return $1;
    })
}


function replaceTag(data){
     return data.replace(/<!--\s?@import:([\w\-\_]+)\s?-->/g,function($1,$2){
         
            console.log('$1:===>',$1); //???
            console.log('$2:===>',$2); //tag
            console.log('tag:===>',tag); //tag
            
            console.log('tag.length:',tag.length)
            
            if(!tag.length){ //如果先执行这个的话,代码还没匹配@block内容就开始替换了
                return $1;
            }
            
            //替换内容-----
            for(var i = 0;i < tag.length ; i++){
                console.log('////i: ',i);
                if($2 === tag[i]){
                    noTag = false;
                    console.log('>>>>>>',i,$2);
                    //替换内容
                    return tagDate[i];
                }else{
                    noTag = true;
                }
                
            }
            //console.log(noTag);
            if(noTag){return $1;}
        
    })
}

如果没办法还是算了,打算封装成插件好用点的,实在不行我还是写在task的任务里吧.

解决方案

已经完成插件,发布到 https://github.com/yyman001/g...
恩,网上查了说是我的node版本问题,原版本6.0,重新安装到4.x.x版本一样,所以应该是代码错了,经过一晚研究还是没看到错在哪里,今早就重新整理一次思路,检查输出文件是否写错,果然...写错了.
final = new Buffer(result);改为file.contents = new Buffer(result);
最后附上更新后的代码

function sample() {
  // creating a stream through which each file will pass
  
  
  var stream = through(function(file, encoding,callback) {
    // do whatever necessary to process the file
    if (file.isNull()) {

    }
    if (file.isBuffer()) {
        //console.log('文件处理')
        fileStorage.push(file)
        //var data = Buffer.concat([file.contents]).toString();
        var data = file.contents.toString(); //效果同上
        // 扫描
        scanTag(data)

    }
    if (file.isStream()) {

    }
    // just pipe data next, or just do nothing to process file later in flushFunction
    // never forget callback to indicate that the file has been processed.
      
      callback();
    }, function(callback) {
        var result = '';
        var target = this;
      fileStorage.forEach(function(file,key){
          var data = file.contents.toString();
            result = replaceTag(data);
            //console.log('data:',result);
            file.contents = new Buffer(result); //更新文件内容
            target.push(file); //重新写入文件
      });
      
      callback();
    })
    
  // returning the file stream
  return stream;
};

这篇关于javascript - gulp插件编写处理多文件错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！