亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

nodejs遍歷文件夾下并操作HTML/CSS/JS/PNG/JPG的方法

 更新時(shí)間:2018年11月01日 09:35:26   作者:小鈾蔻德爾  
這篇文章主要介紹了nodejs遍歷文件夾下并操作HTML/CSS/JS/PNG/JPG的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

需求描述,由于工作的需要,需要將原本用于1280720的網(wǎng)頁(yè)改為19201080的網(wǎng)頁(yè)(電視端頁(yè)面)。需求可以拆分為兩部分,代碼部分的修改以及圖片的修改。在代碼部分,需要將所有位置以及大小相關(guān)的值乘以1.5,圖片的尺寸也要放大1.5倍。

首先使用nodejs遍歷當(dāng)前的文件夾:

// 遍歷所有的文件
var fs = require("fs")
var path = require("path")
var relativePath = '\\test'
// 拿到需要遍歷的路徑
var root = path.join(__dirname)+relativePath

readDirSync(root)
// 使用異步獲取路徑
// 參數(shù)是遍歷文件的根路徑
function readDirSync(path){
  var pa = fs.readdirSync(path);
  // 循環(huán)遍歷當(dāng)前的文件以及文件夾
  pa.forEach(function(ele,index){
    var info = fs.statSync(path+"\\"+ele)  
    if(info.isDirectory()){
      // console.log("dir: "+ele)
      readDirSync(path+"\\"+ele);
    }else{
      var filePath = path +'\\'+ ele;
      // 找到 .css .html .js 文件
      let fileNameReg = /\.css|\.js|\.html|\.htm/g;
      let shouldFormat = fileNameReg.test(filePath);
      if (shouldFormat) {
        console.log('find file:',filePath);
        // 這里就拿到了符合條件的文件路徑,后面就可以根據(jù)這個(gè)路徑來(lái)執(zhí)行相關(guān)的操作
      }
    }  
  })
}

如果是HTMLCSSJS文件使用nodejs文件相關(guān)api來(lái)操作文件,首先是讀取到文件,然后是寫入文件。代碼:

var formatObj = new ChangePosFor4K();// 創(chuàng)建對(duì)象,構(gòu)造函數(shù)在下文尾部

function readFile(params) {
  // 讀取文件示例
  fs.readFile(params, function (err, data) {
    if (err) {
      console.log('happen an error when read file , error is ' + err)
    }
    else {
      var codeTxt = data.toString();
      // 使用對(duì)象來(lái)修改文件內(nèi)容,執(zhí)行位置以及大小相關(guān)值的擴(kuò)大操作
      var formatReturn = formatObj.formatNumber(codeTxt);
      codeTxt = formatReturn.code;
      // 給不同的文件添加不同的注釋
      let jsFileReg = /.js$/i;
      let htmlFileReg = /.html$|.htm$/i;
      let cssFileReg = /.css$/i;
      let tip1 = 'auto formatting tool has check this file.'
      let tip2 = ' block has been handle in this code.'
      let now = new Date();
      if ( jsFileReg.test(params) || cssFileReg.test(params) ) {
        codeTxt += '\n /* '+ tip1 +'*/'
        codeTxt += '\n /* '+ formatReturn.times +' '+ tip2+' at ' + now +'*/'
      } else if(htmlFileReg.test(params)){
        codeTxt += '\n <!-- '+ tip1 +' -->'
        codeTxt += '\n <!-- '+ formatReturn.times +' '+ tip2+' at ' + now +'-->'
      }
      // 將修改好內(nèi)容寫入當(dāng)前路徑的文件
      writeFile(params,codeTxt);
    }
  })  
}


// 寫入文件
// fs.writeFile(file, data[, options], callback)
// file - 文件名或文件描述符。
// data - 要寫入文件的數(shù)據(jù),可以是 String(字符串) 或 Buffer(流) 對(duì)象。
// options - 該參數(shù)是一個(gè)對(duì)象,包含 { encoding, mode, flag } 。默認(rèn)編碼為 utf8, 模式為 0666 , flag 為 'w'
// callback - 回調(diào)函數(shù),回調(diào)函數(shù)只包含錯(cuò)誤信息參數(shù)(err) ,在寫入失敗時(shí)返回。
function writeFile(_path , _txt) {
  fs.writeFile(_path , _txt , function (err) {
    if (err) {
      console.log('happen an error when write file , error is ' + err)
    }
    else{
      console.log("format file success :",_path);
    }
  })
}


// 樣式操作相關(guān)
/* 
* fun:
*/
function ChangePosFor4K(){
      
  var format = /\d+px/gi;
  var tempSufixx = '@@' // 臨時(shí)占位符,因?yàn)樾枰繑?shù)字+px的正則來(lái)匹配,已經(jīng)修改過(guò)的就不能再有px
  this.formatNumber = function(arg){
    // 匹配出所有的 數(shù)字和px的組合 dd.px 
    var initalStr = arg;
    var locIndex = initalStr.search(format); //獲取到起始索引
    var changeTimes = 0;

    while(locIndex>0){
      // 拿到值
      var locStr = getFullPos(initalStr , locIndex);
      // 乘以相關(guān)比例
      var locValue =Math.ceil(parseInt(locStr) * 1.5); 
      var locReplaceStr = locValue+tempSufixx;
      // 替換
      initalStr = replaceStr(initalStr , locIndex , locStr.length , locReplaceStr);
      locIndex = initalStr.search(format);
      // 計(jì)數(shù)
      changeTimes++;
    }
    var locReg = new RegExp(tempSufixx,'gi')
    initalStr = initalStr.replace(locReg , 'px');
    return {code:initalStr,times:changeTimes};
  }
  
  // 根據(jù)字符串和起始位置找到 xxx.px 字符串
  function getFullPos(_str , _begin){
    var output = '';
    while(output.indexOf('px')<0){// 當(dāng)沒有沒有找到完整的字符串
      output += _str.charAt(_begin);
      _begin++;
    }
    return output;
  }

  // 被替換的元素,根據(jù)起始索引,替換長(zhǎng)度,替換元素 
  function replaceStr( _str , _begin , _len , _subStr ){
    // 首先將字符串和拼接字符串轉(zhuǎn)化為數(shù)組
    var strArr = _str.split('');
    var subStrArr = _subStr;
    // 完成替換
    strArr.splice(_begin,_len,subStrArr);
    return strArr.join('');
  }
}

至此代碼相關(guān)操作就已經(jīng)結(jié)束了,下面來(lái)圖片操作。這里的圖片操作借助了gm,首先通過(guò)npm安裝gm,并安裝ImageMagick或者GraphicsMagick軟件。代碼:

var fs = require('fs');
// 兩個(gè)圖片操作底層程序可以選擇
var gm = require('gm').subClass({ImageMagick: true});
var path = require("path")

var relativePath = '\\test'
var root = path.join(__dirname)+relativePath
// 放大圖片并制作副本
function magnifyImg(_path){
  // 獲取當(dāng)前圖片的長(zhǎng)和寬
  // 將長(zhǎng)和寬放大1.5倍
  // 設(shè)置新的圖片大小
  // 沒有直接調(diào)用magnify,因?yàn)閙agnify不支持小數(shù)
  gm(_path)
  .size(function (err , size){
    if (!err){
      // console.log(size.width > size.height ? 'wider' : 'taller than you');
      let nowWidth =parseInt(size.width) ;
      let nowHeight = parseInt(size.height) ;
      let magnifyWidth = Math.floor( nowWidth * 1.5);
      let magnifyHeight = Math.floor( nowHeight * 1.5);
      gm(_path).resizeExact(magnifyWidth,magnifyHeight).write(_path,function(err){
        if (!err) 
          console.log(_path+'done');
        else
          console.log(_path+'fail'+err);
      })
      
    }
    else{
      console.log('get size has error '+_path + ' and err is : '+err);
    }
  })
}

至此,功能就完成了。

比較有感觸的是在操作代碼中相關(guān)位置以及大小的實(shí)現(xiàn)過(guò)程,花了一些心思。圖片的操作就是百度之后根據(jù)別人寫的來(lái)做的。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • node.js解決全局安裝pnpm后無(wú)法使用的問(wèn)題

    node.js解決全局安裝pnpm后無(wú)法使用的問(wèn)題

    在全局安裝pnpm后,如果出現(xiàn)無(wú)法使用的問(wèn)題,一般是由于沒有添加系統(tǒng)變量導(dǎo)致的,本文就來(lái)介紹一下node.js解決全局安裝pnpm后無(wú)法使用的問(wèn)題,感興趣的可以了解一下
    2024-10-10
  • 安裝nvm實(shí)現(xiàn)切換node

    安裝nvm實(shí)現(xiàn)切換node

    這篇文章主要介紹了安裝nvm實(shí)現(xiàn)切換node的詳細(xì)過(guò)程,本文給大家講解的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
    2024-06-06
  • M2實(shí)現(xiàn)Nodejs項(xiàng)目自動(dòng)部署的方法步驟

    M2實(shí)現(xiàn)Nodejs項(xiàng)目自動(dòng)部署的方法步驟

    這篇文章主要介紹了M2實(shí)現(xiàn)Nodejs項(xiàng)目自動(dòng)部署的方法步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2019-05-05
  • Nodejs學(xué)習(xí)item【入門手上】

    Nodejs學(xué)習(xí)item【入門手上】

    這篇文章主要介紹了Nodejs學(xué)習(xí)item【入門手上】,需要的朋友可以參考下
    2016-05-05
  • Node輸出日志的正確方法示例

    Node輸出日志的正確方法示例

    這篇文章主要為大家介紹了Node輸出日志的正確方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-03-03
  • 淺談node的事件機(jī)制

    淺談node的事件機(jī)制

    本篇文章主要介紹了node的事件機(jī)制,本文通過(guò)實(shí)現(xiàn)一個(gè)簡(jiǎn)易的、具有發(fā)布/訂閱模式的事件機(jī)制,以此來(lái)理清EventEmitter類的實(shí)現(xiàn)思路,有興趣的可以了解一下
    2017-10-10
  • 在Ubuntu系統(tǒng)上安裝Node.JS的教程

    在Ubuntu系統(tǒng)上安裝Node.JS的教程

    這篇文章主要介紹了在Ubuntu系統(tǒng)上安裝Node.JS的教程,Node.JS的高性能V8解釋器運(yùn)行及異步機(jī)制為其帶來(lái)了巨大的人氣,需要的朋友可以參考下
    2015-10-10
  • node.js中debug模塊的簡(jiǎn)單介紹與使用

    node.js中debug模塊的簡(jiǎn)單介紹與使用

    這篇文章主要介紹了node.js中debug模塊的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),相信會(huì)對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)跟著小編來(lái)一起看看吧。
    2017-04-04
  • 切換node版本的實(shí)現(xiàn)方式

    切換node版本的實(shí)現(xiàn)方式

    由于有些比較老的系統(tǒng),使用的node版本較低,本機(jī)裝的node版本又比較高,不想降node版本,那么就需要考慮能不能在系統(tǒng)里管理多個(gè)node版本,本文主要介紹了切換node版本,感興趣的可以了解一下
    2024-04-04
  • node.js抓取并分析網(wǎng)頁(yè)內(nèi)容有無(wú)特殊內(nèi)容的js文件

    node.js抓取并分析網(wǎng)頁(yè)內(nèi)容有無(wú)特殊內(nèi)容的js文件

    nodejs獲取網(wǎng)頁(yè)內(nèi)容綁定data事件,獲取到的數(shù)據(jù)會(huì)分幾次相應(yīng),如果想全局內(nèi)容匹配,需要等待請(qǐng)求結(jié)束,在end結(jié)束事件里把累積起來(lái)的全局?jǐn)?shù)據(jù)進(jìn)行操作,本文給大家介紹node.js抓取并分析網(wǎng)頁(yè)內(nèi)容有無(wú)特殊內(nèi)容的js文件,需要的朋友參考下
    2015-11-11

最新評(píng)論