Gulp工具通過css類或xml標記去除代碼

Question

我試圖創建一個工具來刪除在gulp進程中運行的特定xml標記。我們的想法是前端有虛擬內容。然而，在後端集成的下一階段，它將虛擬內容包裝在xml標籤中，並根據xml標籤名稱動態地插入一些帶有變量的後端代碼。對於這種情況，有PHP，但這個想法是創建一個工具插入任何後端代碼

我所遇到gulp-remove-code，但問題是它的硬編碼的名稱和index.js從內部正則表達式節點模塊根據具有特定空間的註釋進行匹配。 「

此外，我已經看過gulp-inject-string標籤之前將新的內容。所以最終的想法是標記的XML標籤名，注入標籤上面的新代碼，然後在標籤去除一切。

//markup.html 

<div class="home"> 
    // some text 
    <div class="home__text"> 
    <cms_home_text> 
     My dummy text 
    </cms_home_text> 
    </div> 

    // an image 
    <div class="home__image"> 
    <cms_home_image> 
    <img src="someImage.png" alt="some alt" /> 
    </cms_home_image> 
    </div> 

    // a link 
    <div class="home__link"> 
    <cms_home_link1> 
    <a href="someLink1.html">here</a> 
    </cms_home_link1> 
    </div> 

    // another link 
    <div class="home__link"> 
    <cms_home_link2> 
    <a href="someLink2.html">here</a> 
    </cms_home_link2> 
    </div> 
</div> 

成爲

//markup.php 

<div class="home"> 
    // some text 
    <div class="home__text"> 
    <?php $cms_home_text ?> 
    </div> 

    // an image 
    <div class="home__image"> 
    <img src="<?php $cms_home_image ?>" alt="<?php $cms_home_image_alt ?>" /> 
    </div> 

    // a link 
    <div class="home__link"> 
    <a href=<?php $cms_home_link1 ?>"> 
     <?php $cms_home_link1_text ?> 
    </a> 
    </div> 

    // another link 
    <div class="home__link"> 
    <a href=<?php $cms_home_link2 ?>"> 
     <?php $cms_home_link2_text ?> 
    </a> 
    </div> 
</div> 

Answer 1

我嘗試了一些東西，但得到這個工作，只要你想我的想法。

const gulp = require("gulp"); 
const fs = require('fs'); 

const jsdom = require("jsdom"); 
const { JSDOM } = jsdom; 

// hard-coded here but could be a gulp.src stream if you have more than one file to translate 
const html = 'markup.html'; 

gulp.task('default', [addPHP]); 

gulp.task('addPHP', function() { 

    var dirty; 
    var temp; 
    var clean; 

    dirty = fs.readFileSync(html, 'utf8'); 

    var frag = new JSDOM(dirty); 

    console.dir(frag.window.document.body.children[0].children); 

    var HLinks = frag.window.document.querySelectorAll("div.home__link"); 
    var HImages = frag.window.document.querySelectorAll("div.home__image"); 
    var HTexts = frag.window.document.querySelectorAll("div.home__text"); 

// <div class="home__text"> 
//  <cms_home_text> 
//  My dummy text 
//  </cms_home_text> 
// </div> 

// <div class="home__text"> 
//  <?php $cms_home_text ?> 
//  </div> 

    HTexts.forEach(function (el, index, list) { 
    console.log(el.className); 

    var cmsTagName = el.childNodes[1].nodeName.toLowerCase(); 
    console.log(cmsTagName); 

    var innerLink = frag.window.document.createTextNode("<?php $" + cmsTagName + "_text ?>"); 
    el.replaceChild(innerLink, el.childNodes[1]); 
    }); 

// <cms_home_image> 
//  <img src="someImage.png" alt="some alt" /> 
// </cms_home_image> 

// <img src="<?php $cms_home_image ?>" alt="<?php $cms_home_image_alt ?>" /> 

    HImages.forEach(function (el, index, list) { 
    console.log(el.className); 
    var cmsTagName = el.childNodes[1].nodeName.toLowerCase(); 
    console.log(cmsTagName); 
    var temp = frag.window.document.createElement("img"); 
    temp.src = "<?php $" + cmsTagName + " ?>"; 
    temp.alt = "<?php $" + cmsTagName + "_alt ?>" 

    el.replaceChild(temp, el.childNodes[1]); 
    }); 

// <cms_home_link1> 
//  <a href="someLink1.html">here</a> 
// </cms_home_link1> 

// <a href="<?php $cms_home_link1 ?>"> 
//  <?php $cms_home_link1_text ?> 
// </a> 

    HLinks.forEach(function (el, index, list) { 
    console.log(el.className); 

    var cmsTagName = el.childNodes[1].nodeName.toLowerCase(); 
    console.log(cmsTagName); 
    var tempLink = frag.window.document.createElement("a"); 
    tempLink.href = "<?php $" + cmsTagName + " ?>"; 

    var innerLink = frag.window.document.createTextNode("<?php $" + cmsTagName + "_text ?>"); 
    tempLink.appendChild(innerLink); 

    el.replaceChild(tempLink, el.childNodes[1]); 
    }); 

    // because createTextNode changes <> to htmlEntities 
    var cleaned = frag.window.document.querySelector("div.home").outerHTML.replace(/&lt;/gm, "<").replace(/&gt;/gm, ">"); 


    fs.writeFileSync("markup.php", cleaned, 'utf8'); 
    return; 
}) 

我認爲這只是一種regExp方法，但可能會像您提到的那樣太脆弱。我也考慮過sanitize-html，它可以幫助你實現目標，並且很方便地瞭解。

還有其他的HTML/DOM解析器，如htmlparser和xmldom，但jsdom似乎是最容易與我合作。

此代碼的主要部分脆是行：

var cmsTagName = el.childNodes[1].nodeName.toLowerCase(); 

出現在每個在foreach呼叫。如果您的dom結構與您的示例不同，以便標籤不是el.childNodes 1，您將不得不修改此代碼。並注意空textNodes。我似乎想起了一個選擇器，它可以跳過空的textNodes，但我現在不記得它。

讓我知道這是否適合你。

Answer 2

緩衝區來自一個獲取file.contents以傳遞給函數的gulp流。然後當內容不爲空時，我們得到每個文檔中匹配的數量，然後循環並採用與reg-ex相匹配的對象。

我們提取完整匹配，ID和類型，然後替換爲動態php代碼，以便前端可以具有自定義變量，以及針對文本，圖像和鏈接的特定響應。

function applyReplacements(buffer) { 
     var contents = buffer.toString('utf8'); 
     const regex = /<(cms_.*)(.\b[^>]*)\b[^>]*>((.|\n)*?)<\/\1>/g; 
     let m,cmsReplace,finalMatch,cmsID,cmsType; 
     if (contents.length > 0) { 
      while ((m = regex.exec(contents)) !== null) { 
       let target = contents.match(regex).length; 
       for(let i=0;i< target;i++){ 
        //This is necessary to avoid infinite loops with zero-width matches 
        if (m.index === regex.lastIndex) { 
         regex.lastIndex++; 
        }  
        // The result can be accessed through the `m`-variable. 
        m.forEach((match, groupIndex) => { 
         if(groupIndex == 0){ 
          cmsReplace = match; 
         } 
         else if(groupIndex == 1) { 
          cmsID = match; 
         } 
         else if(groupIndex == 2) { 
          cmsType = match.split('"')[1]; 
          // provide the final replacment variables 
          if(cmsType == "cmsImage") { 
           finalMatch = '<img src="<?php $'+cmsID+'?>" alt="<?php $'+cmsID+'_alt ?>" width="100%" height="100%" />'; 
          } else if(cmsType == "cmsLink") { 
           finalMatch = '<a href="<?php $'+cmsID+' ?>"><?php $'+cmsID+'_text ?></a>'; 
          } else { 
           finalMatch = '<?php $'+cmsID+' ?>'; 
          } 
          contents = contents.replace(cmsReplace,finalMatch); 
         } 
        }); 
       } 
      } 
     } 
     return new Buffer(contents); 
    }