Gulp工具通过CSS类或xml标签删除代码

Question

Im trying to create a tool that removes specific xml tags that runs in a gulp process. The idea being that for front-end we have dummy content. However in the next stage for back-end integration it takes that dummy content wrapped in an xml tag and dynamically inserts some back-end code with an variable based on the xml tag name. For this case there is php, but the idea is to create a tool to insert any back-end code

I have come across gulp-remove-code , but the issue is its all hard-coded names and the regex inside the index.js from the node modules matches based on comments with specific spaces. "

In addition i have looked at gulp-inject-string to place before the tags new content. So the final idea is to tag the xml tag name, inject new code above the tags, then remove everything in the tags.

//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>

becomes

//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

I tried a few things but got this working I think as you want.

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;
})

I considered just a regExp approach but that is probably too brittle as you mentioned. I also considered sanitize-html which gets you a long ways towards your goal and is handy to know about.

There are other html/dom parsers out there like htmlparser and xmldom but jsdom seemed the easiest to work with for me.

The main brittle part of this code is the line:

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

appearing in each of the forEach calls. If your dom structure varies from your example so that the tags are not el.childNodes 1 you will have to modify this code. And watch out for empty textNodes. I seem to recall a selector that would skip empty textNodes but I can't recall it just now.

Let me know if this works for you.

Answer 2

The buffer comes from a gulp stream that gets file.contents to pass to the function. Then while the contents is not null, we get the amount of matches in each document, then loop through and take the object matches for the reg-ex.

We extract the full match, ID and type, then replace with the dynamic php code so the front-end can have custom variables, with specific responses for text,images and links.

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);
    }