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 <!-- '+ tip1 +' -->'
        codetxt += '\n <!-- '+ formatreturn.times +' '+ tip2+' at ' + now +'-->'
      }
      // 将修改好内容写入当前路径的文件
      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);
    }
  })
}

至此，功能就完成了。

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

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