如何使用Node JS用增加的尺寸替换CSS中的所有px尺寸？

Question

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -ms-content-zooming: none;
    margin: 0;
    touch-action: none;
    user-select: none
}

body,
html {
    height: 100%
}

.slide {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    box-sizing: border-box;
    height: 100%;
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 0, 0)
}

img {
    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none
}

* {
    margin: 0;
    padding: 0
}

body,
html {
    background: #fff;
    color: #000;
    font-family: Arial;
    margin: 0;
    padding: 0
}

button,
button:focus {
    outline: 0
}

#wrapper {
    background-image: url(media/images/common/mainbg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 768px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1024px
}

#wrapper-inner {
    background: #fff;
    height: 768px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 1024px
}

#home-multi-line {
    background-image: url(media/images/common/orange-multi-lines.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    bottom: 0;
    height: 385px;
    left: 0;
    position: absolute;
    width: 1024px
}

#blue-slice {
    background-image: url(media/images/common/blue-slice.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    bottom: 160px;
    height: 109px;
    left: 0;
    position: absolute;
    width: 1024px
}

#moon-man-lrg {
    bottom: 0;
    left: 50px;
    position: absolute
}

#hats-off {
    position: absolute;
    right: 50px;
    top: 50px
}

#home-banner {
    position: absolute;
    right: 0;
    top: 290px
}

#ferring-logo {
    bottom: 5px;
    position: absolute;
    right: 30px
}

#picolax-top-right {
    position: absolute;
    right: 30px;
    top: 70px
}

#top-cover {
    background-image: url(media/images/common/top-cover.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    height: 109px;
    position: absolute;
    top: 0;
    width: 100%;
    width: 1024px
}

#footer-cover {
    background-image: url(media/images/common/footer-wave.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    bottom: 65px;
    display: block;
    height: 109px;
    position: absolute;
    width: 100%;
    width: 1024px
}

#footer-logo {
    bottom: 5px;
    left: 30px;
    position: absolute;
    z-index: 9999999
}

#footer-logo button {
    background-color: transparent;
    background-image: url(media/images/common/footer-logo.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    border: 0;
    cursor: pointer;
    height: 68px;
    width: 244px
}

#qslide-buttons {
    bottom: 25px;
    display: table;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 999999
}

.qslide-cell {
    display: table-cell;
    padding: 0 10px;
    width: 50%
}

.qslide-cell button {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .38);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .38);
    background: #fff;
    border: 1px #f0872c solid;
    border-radius: 20px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .38);
    color: #000;
    cursor: pointer;
    font-size: 15px;
    padding: 5px;
    text-decoration: none;
    width: 136px
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.page-info {
    display: block;
    padding: 95px 5px 0 50px;
    position: relative
}

.page-info h2 {
    color: #009dd5;
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    margin: 0 0 20px 10px;
    padding: 0
}

.page-info h3 {
    color: #ee7825;
    font-size: 23px;
    font-weight: 700;
    line-height: 23px;
    margin: 0 0 10px 0;
    padding: 0
}

.page-info h4 {
    color: #009dd5;
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    margin: 0 0 10px 0;
    padding: 0
}

.page-info p {
    font-size: 20px;
    line-height: 25px;
    margin: 0 0 25px 0
}

.page-info h2 span {
    color: #ee7825
}

.page-info h2 sup {
    font-size: 14px
}

.info-box {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .38);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .38);
    background: #fff;
    border: 1px #f0872c solid;
    border-radius: 20px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .38);
    color: #262626;
    display: block;
    font-size: 18px;
    padding: 20px 20px 10px;
    position: relative;
    text-decoration: none
}

.has-presentation {
    padding: 20px 180px 10px 20px !important;
    width: 651px
}

.gooffscreen {
    padding: 20px 270px 10px 20px !important;
    width: 702px
}

.info-box ul {
    list-style: none;
    margin: 0 0 30px;
    padding: 0
}

.info-box ul li {
    background: url(media/images/common/list-style.png) no-repeat top left;
    font-size: 19px;
    line-height: 25px;
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 0 30px
}

#thirdpage .info-box ul li {
    font-size: 21px;
    line-height: 30px
}

.references {
    font-size: 15px;
    padding: 140px 100px 0 50px !important;
    text-align: justify
}

.references p {
    margin: 0 0 10px !important
}

.prescribe-info {
    font-size: 11px;
    padding: 86px 30px 0 !important;
    text-align: left
}

.prescribe-info p {
    font-size: 11px !important;
    line-height: 12px !important;
    margin: 0 0 2.65px !important
}

.prescribe-info .spacebdr {
    display: block;
    height: 4px;
    width: 100%
}

/* .prescribe-info sup {
    font-size: 8px;
    position: relative;
    top: 2px
} */
.prescribe-info sup {
    font-size: 8px;
    vertical-align: top;
    position: relative;
    top: -1.4px
}
.prescribe-info ul {
    margin: 0 0 0 15px !important
}

.prescribe-info li {
    margin: 0 0 3px 0 !important
}

.splitbox-tbl {
    display: table;
    width: 100%
}

.splitbox {
    display: table-cell;
    padding: 0 15px;
    width: 33%
}

ol {
    margin: 0 0 0 20px;
    padding: 0
}

ol li {
    margin: 0 0 10px;
    padding: 0
}

.info-box sup {
    font-size: 12px
}

.man-present {
    bottom: -30px;
    position: absolute;
    right: -85px;
    width: 353px
}

.reg-note {
    color: #262626;
    display: block;
    font-size: 24px;
    margin: 15px 0 0;
    width: 100%
}

.reg-note span {
    color: #ee7825;
    font-weight: 700
}

.reg-note sup {
    font-size: 12px
}

.note {
    color: #262626;
    display: block;
    font-size: 11px;
    margin: 15px 0 0;
    width: 100%
}

.center-txt h2 {
    margin: 80px 0 15px 355px !important
}

.center-txt .info-box {
    margin-left: 100px;
    padding: 20px 20px 0 380px;
    width: 382px !important
}

.present-left {
    bottom: -167px;
    left: -120px;
    position: absolute
}

.block-txt {
    border: 1px #000 solid;
    display: block;
    margin: 0 0 25px;
    width: 196px
}

.coboltslide .button-slide {
    bottom: 102px
}

.button-slide {
    background-image: url(media/images/common/navigation.png);
    background-repeat: no-repeat;
    bottom: 50%;
    height: 33px;
    margin-bottom: -14px;
    position: absolute;
    width: 33px;
    z-index: 9999
}

.button-slide button {
    background: 0 0;
    border: 0;
    display: inline-block;
    height: 33px;
    width: 33px
}

.prev-slide {
    background-position: 0 0;
    left: 0
}

.nxt-slide {
    background-position: -37px 0;
    right: 0
}

.first-intro,
.second-intro,
.third-intro {
    display: block;
    opacity: 0;
}

.first-intro ul,
.second-intro ul,
.third-intro ul {
    display: block;
    opacity: 0;
}

.copywrite {
    display: block;
    font-size: 11px;
    margin: 20px 0 0;
    width: 100%
}

.medanimation {
    height: 333px
}

.hideoverflow {
    display: none;
    height: 333px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 761px
}

.animationbg {
    display: none;
    left: 20px;
    position: absolute;
    top: 20px
}

.static-image {
    display: block
}

.medanimation ul {
    left: 10px;
    list-style: none;
    position: fixed;
    top: 35px
}

.medanimation ul>li {
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    cursor: pointer;
    display: inline-block;
    padding-right: 10px;
    transition: all .3s ease
}

.medanimation ul>li:hover {
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -webkit-transform: scale(.9);
    transform: scale(.9)
}

#waves {
    left: 182px;
    position: absolute;
    top: -35px;
    z-index: 20
}

#waves2 {
    left: 182px;
    position: absolute;
    top: 88px;
    z-index: 20
}

.faecesicon {
    left: 76px;
    position: absolute;
    top: 147px
}

.faecesicon img {
    display: block;
    height: auto;
    width: 100%
}

.animateme {
    left: 500px;
    transition: left 3s ease-in-out
}

.page3ul li {
    display: block;
    opacity: 0;
}

[rv-animate] {
    visibility: hidden
}

[rv-animate].animate-show,
[rv-animate].animate-visible,
[rv-animate].animated {
    visibility: inherit
}

[rv-nav] {
    cursor: pointer
}





 .first-intro,
 .second-intro,
 .third-intro {
    display: block;
    opacity: 0;
}

 .first-intro ul,
 .second-intro ul,
 .third-intro ul {
    display: block;
    opacity: 0;
}


 .first-intro.activefirst-intro{
  animation: animateActive 1000ms ease 2000ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

 .first-intro ul.activefirst-introul{
    animation: animateActive 1000ms ease 3000ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}


 .second-intro.activesecond-intro{
    animation: animateActive 1000ms ease 4000ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  
   .second-intro ul.activesecond-introul{
      animation: animateActive 1000ms ease 5000ms;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
  }
  
   .third-intro.activethird-intro{
    animation: animateActive 1000ms ease 6000ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  
   .third-intro ul.activethird-introul{
      animation: animateActive 1000ms ease 7000ms;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
  }
  
  .page3ul li:nth-child(1).activeNth1{
    animation: animateActive 800ms ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  .page3ul li:nth-child(2).activeNth2{
    animation: animateActive 800ms ease 1000ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.page3ul li:nth-child(3).activeNth3{
    animation: animateActive 800ms ease 2000ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.page3ul li:nth-child(4).activeNth4{
    animation: animateActive 800ms ease 3000ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.page3ul li:nth-child(5).activeNth5{
    animation: animateActive 800ms ease 4000ms;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

















@keyframes animateActive {
    0%{

    }
    100%{
        opacity: 1;
    }
}

@-webkit-keyframes animateActive {
    0%{

    }
    100%{
        opacity: 1;
    }
}

@-moz-keyframes animateActive {
    0%{

    }
    100%{
        opacity: 1;
    }
}

我想通过节点增加css中所有px的大小。为此，我正在读取一个css文件，而不是尝试用增加的pxs替换它并将其写入另一个css文件。它给了我虫子。它没有提供我在替换功能中提供的确切数字。

    var fs = require('fs')

var result ,newresult=[],thirdData;
fs.readFile("common.css", 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }

 var regex   = /\b\d{1,4}(?:\.\d{1,4})?px/g;
 result = data.match(regex);
 result.forEach(function(item){
    newresult.push(Math.ceil(item.slice(0, -2)*(2.66796875))+"px");
});

  var firstData=data;
  var secondData = ""    

//   newresult.forEach(function(item,index){ 
//     var re = new RegExp(result[index],"g");
//     console.log(item);
//      // thirdData=  newdata(firstData,secondData,result[index],newresult[index]);
//       secondData = firstData.replace(re,function(match){
//         return match = item+"g"      });
//       //secondData = "";
//       //secondData = thirdData;
//       //firstData = "";


//      firstData=secondData; 
//      secondData="";

// }); 

for(let i=0; i<result.length-1; i++){

  let abc = newresult[i];

  secondData = firstData.replace(result[i],function(match,$1){
   return match = (String(abc)+"px"); 
  });
  if(secondData){
     firstData =""
     firstData = secondData;
  }

}

 fs.writeFile('common1.css',firstData ,function(err){
  if(err){

 }
 })
});


function newdata(firstData,secondData,re,replace){
   secondData = firstData.replace(re,replace);
   console.log(re,replace)
   return secondData;
}

String.prototype.fakeReplace=function(str, newstr) {
  return this.split(str).join(newstr);
};

对于某些像素，它可以正常工作，但对于某些像素，它却提供了错误的输出，例如1024px应该是2732px，但它使它变为2736px，我没有得到。为什么会这样？