nodejs遍歷文件夾下并操作HTML/CSS/JS/PNG/JPG的方法
需求描述,由于工作的需要,需要將原本用于1280720的網(wǎng)頁改為19201080的網(wǎng)頁(電視端頁面)。需求可以拆分為兩部分,代碼部分的修改以及圖片的修改。在代碼部分,需要將所有位置以及大小相關(guān)的值乘以1.5,圖片的尺寸也要放大1.5倍。
首先使用nodejs遍歷當前的文件夾:
// 遍歷所有的文件 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)遍歷當前的文件以及文件夾 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ù)這個路徑來執(zhí)行相關(guān)的操作 } } }) }
如果是HTMLCSSJS文件使用nodejs文件相關(guān)api來操作文件,首先是讀取到文件,然后是寫入文件。代碼:
var formatObj = new ChangePosFor4K();// 創(chuàng)建對象,構(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(); // 使用對象來修改文件內(nèi)容,執(zhí)行位置以及大小相關(guān)值的擴大操作 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)容寫入當前路徑的文件 writeFile(params,codeTxt); } }) } // 寫入文件 // fs.writeFile(file, data[, options], callback) // file - 文件名或文件描述符。 // data - 要寫入文件的數(shù)據(jù),可以是 String(字符串) 或 Buffer(流) 對象。 // options - 該參數(shù)是一個對象,包含 { encoding, mode, flag } 。默認編碼為 utf8, 模式為 0666 , flag 為 'w' // callback - 回調(diào)函數(shù),回調(diào)函數(shù)只包含錯誤信息參數(shù)(err) ,在寫入失敗時返回。 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ù)字+px的正則來匹配,已經(jīng)修改過的就不能再有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); // 計數(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){// 當沒有沒有找到完整的字符串 output += _str.charAt(_begin); _begin++; } return output; } // 被替換的元素,根據(jù)起始索引,替換長度,替換元素 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é)束了,下面來圖片操作。這里的圖片操作借助了gm,首先通過npm安裝gm,并安裝ImageMagick或者GraphicsMagick軟件。代碼:
var fs = require('fs'); // 兩個圖片操作底層程序可以選擇 var gm = require('gm').subClass({ImageMagick: true}); var path = require("path") var relativePath = '\\test' var root = path.join(__dirname)+relativePath // 放大圖片并制作副本 function magnifyImg(_path){ // 獲取當前圖片的長和寬 // 將長和寬放大1.5倍 // 設置新的圖片大小 // 沒有直接調(diào)用magnify,因為magnify不支持小數(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)位置以及大小的實現(xiàn)過程,花了一些心思。圖片的操作就是百度之后根據(jù)別人寫的來做的。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- nodejs如何獲取指定路徑下所有的文件夾名或類型
- NodeJS 文件夾拷貝以及刪除功能
- 純異步nodejs文件夾(目錄)復制功能
- nodejs文件夾深層復制功能
- nodejs對項目下所有空文件夾創(chuàng)建gitkeep的方法
- nodejs實現(xiàn)獲取本地文件夾下圖片信息功能示例
- NodeJS 將文件夾按照存放路徑變成一個對應的JSON的方法
- Nodejs實現(xiàn)多文件夾文件同步
- nodejs判斷文件、文件夾是否存在及刪除的方法
- Nodejs 復制文件/文件夾的方法
- nodejs實現(xiàn)遍歷文件夾并統(tǒng)計文件大小
- nodejs清空/刪除指定文件夾下面所有文件或文件夾的方法示例
相關(guān)文章
node.js抓取并分析網(wǎng)頁內(nèi)容有無特殊內(nèi)容的js文件
nodejs獲取網(wǎng)頁內(nèi)容綁定data事件,獲取到的數(shù)據(jù)會分幾次相應,如果想全局內(nèi)容匹配,需要等待請求結(jié)束,在end結(jié)束事件里把累積起來的全局數(shù)據(jù)進行操作,本文給大家介紹node.js抓取并分析網(wǎng)頁內(nèi)容有無特殊內(nèi)容的js文件,需要的朋友參考下2015-11-11