html遍历循环文件夹,nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法

需求描述，由于工作的需要，需要将原本用于1280720的网页改为19201080的网页(电视端页面)。需求可以拆分为两部分，代码部分的修改以及图片的修改。在代码部分，需要将所有位置以及大小相关的值乘以1.5，图片的尺寸也要放大1.5倍。

首先使用nodejs遍历当前的文件夹：

// 遍历所有的文件

var fs = require("fs")

var path = require("path")

var relativePath = '\\test'

// 拿到需要遍历的路径

var root = path.join(__dirname)+relativePath

readDirSync(root)

// 使用异步获取路径

// 参数是遍历文件的根路径

function readDirSync(path){

var pa = fs.readdirSync(path);

// 循环遍历当前的文件以及文件夹

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

// 这里就拿到了符合条件的文件路径，后面就可以根据这个路径来执行相关的操作

}

}

})

}

如果是HTMLCSSJS文件使用nodejs文件相关api来操作文件，首先是读取到文件，然后是写入文件。代码：

var formatObj = new ChangePosFor4K();// 创建对象，构造函数在下文尾部

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

// 使用对象来修改文件内容，执行位置以及大小相关值的扩大操作

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 '

codeTxt += '\n '

}

// 将修改好内容写入当前路径的文件

writeFile(params,codeTxt);

}

})

}

// 写入文件

// fs.writeFile(file, data[, options], callback)

// file - 文件名或文件描述符。

// data - 要写入文件的数据，可以是 String(字符串) 或 Buffer(流) 对象。

// options - 该参数是一个对象，包含 { encoding, mode, flag } 。默认编码为 utf8, 模式为 0666 ， flag 为 'w'

// callback - 回调函数，回调函数只包含错误信息参数(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);

}

})

}

// 样式操作相关

/*

* fun：

*/

function ChangePosFor4K(){

var format = /\d+px/gi;

var tempSufixx = '@@' // 临时占位符，因为需要靠数字+px的正则来匹配，已经修改过的就不能再有px

this.formatNumber = function(arg){

// 匹配出所有的 数字和px的组合 dd.px

var initalStr = arg;

var locIndex = initalStr.search(format); //获取到起始索引

var changeTimes = 0;

while(locIndex>0){

// 拿到值

var locStr = getFullPos(initalStr , locIndex);

// 乘以相关比例

var locValue =Math.ceil(parseInt(locStr) * 1.5);

var locReplaceStr = locValue+tempSufixx;

// 替换

initalStr = replaceStr(initalStr , locIndex , locStr.length , locReplaceStr);

locIndex = initalStr.search(format);

// 计数

changeTimes++;

}

var locReg = new RegExp(tempSufixx,'gi')

initalStr = initalStr.replace(locReg , 'px');

return {code:initalStr,times:changeTimes};

}

// 根据字符串和起始位置找到 xxx.px 字符串

function getFullPos(_str , _begin){

var output = '';

while(output.indexOf('px')<0){// 当没有没有找到完整的字符串

output += _str.charAt(_begin);

_begin++;

}

return output;

}

// 被替换的元素，根据起始索引，替换长度，替换元素

function replaceStr( _str , _begin , _len , _subStr ){

// 首先将字符串和拼接字符串转化为数组

var strArr = _str.split('');

var subStrArr = _subStr;

// 完成替换

strArr.splice(_begin,_len,subStrArr);

return strArr.join('');

}

}

至此代码相关操作就已经结束了，下面来图片操作。这里的图片操作借助了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倍

// 设置新的图片大小

// 没有直接调用magnify，因为magnify不支持小数

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

}

})

}

至此，功能就完成了。

比较有感触的是在操作代码中相关位置以及大小的实现过程，花了一些心思。图片的操作就是百度之后根据别人写的来做的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。