nodejs遍歷文件夾下并操作HTML/CSS/JS/PNG/JPG的方法
需求描述,由于工作的需要,需要將原本用于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)操作文件,首先是讀取到文件,然后是寫(xiě)入文件。代碼:
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)容寫(xiě)入當(dāng)前路徑的文件
writeFile(params,codeTxt);
}
})
}
// 寫(xiě)入文件
// fs.writeFile(file, data[, options], callback)
// file - 文件名或文件描述符。
// data - 要寫(xiě)入文件的數(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) ,在寫(xiě)入失敗時(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)沒(méi)有沒(méi)有找到完整的字符串
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è)置新的圖片大小
// 沒(méi)有直接調(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ù)別人寫(xiě)的來(lái)做的。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- nodejs如何獲取指定路徑下所有的文件夾名或類型
- NodeJS 文件夾拷貝以及刪除功能
- 純異步nodejs文件夾(目錄)復(fù)制功能
- nodejs文件夾深層復(fù)制功能
- nodejs對(duì)項(xiàng)目下所有空文件夾創(chuàng)建gitkeep的方法
- nodejs實(shí)現(xiàn)獲取本地文件夾下圖片信息功能示例
- NodeJS 將文件夾按照存放路徑變成一個(gè)對(duì)應(yīng)的JSON的方法
- Nodejs實(shí)現(xiàn)多文件夾文件同步
- nodejs判斷文件、文件夾是否存在及刪除的方法
- Nodejs 復(fù)制文件/文件夾的方法
- nodejs實(shí)現(xiàn)遍歷文件夾并統(tǒng)計(jì)文件大小
- nodejs清空/刪除指定文件夾下面所有文件或文件夾的方法示例
相關(guān)文章
Node.js中文件系統(tǒng)fs模塊的使用及常用接口
fs是filesystem的縮寫(xiě),該模塊提供本地文件的讀寫(xiě)能力,基本上是POSIX文件操作命令的簡(jiǎn)單包裝。這篇文章主要介紹了Node.js中的文件系統(tǒng)fs模塊的使用,需要的朋友可以參考下2020-03-03
Node.js使用對(duì)話框ngDialog的示例代碼
本篇文章主要介紹了Node.js使用對(duì)話框ngDialog的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
nodejs連接ftp上傳下載實(shí)現(xiàn)方法詳解【附:踩坑記錄】
這篇文章主要介紹了nodejs連接ftp上傳下載實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了node.js使用ftp模塊實(shí)現(xiàn)針對(duì)ftp上傳、下載相關(guān)操作的方法,并附帶記錄了傳輸速度慢的解決方法,需要的朋友可以參考下2023-04-04
Node.js開(kāi)發(fā)教程之基于OnceIO框架實(shí)現(xiàn)文件上傳和驗(yàn)證功能
這篇文章主要介紹了Node.js開(kāi)發(fā)教程之基于OnceIO框架實(shí)現(xiàn)文件上傳和驗(yàn)證的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
nodejs使用readline逐行讀取和寫(xiě)入文件的實(shí)現(xiàn)
這篇文章給大家介紹了nodejs使用readline逐行讀取和寫(xiě)入文件的實(shí)現(xiàn)方法,文中通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
詳解基于Koa2開(kāi)發(fā)微信二維碼掃碼支付相關(guān)流程
這篇文章主要介紹了詳解基于Koa2開(kāi)發(fā)微信二維碼掃碼支付相關(guān)流程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Node.js實(shí)現(xiàn)批量下載圖片簡(jiǎn)單操作示例
這篇文章主要介紹了Node.js實(shí)現(xiàn)批量下載圖片簡(jiǎn)單操作,結(jié)合實(shí)例形式分析了node.js批量下載圖片的具體步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-01-01
Node.js中使用事件發(fā)射器模式實(shí)現(xiàn)事件綁定詳解
這篇文章主要介紹了Node.js中使用事件發(fā)射器模式實(shí)現(xiàn)事件綁定詳解,本文一并講解了回調(diào)模式、發(fā)射器模式、事件類型等基礎(chǔ)知識(shí)做了補(bǔ)充,需要的朋友可以參考下2014-08-08

