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


Posted in NodeJs onNovember 01, 2018

需求描述,由于工作的需要,需要将原本用于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);
    }
  })
}

至此,功能就完成了。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
Nodejs极简入门教程(三):进程
Oct 27 NodeJs
nodejs批量修改文件编码格式
Jan 22 NodeJs
nodejs实现HTTPS发起POST请求
Apr 23 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
nodejs入门教程四:URL相关模块用法分析
Apr 24 NodeJs
NodeJS使用七牛云存储上传文件的方法
Jul 24 NodeJs
Nodejs 和Session 原理及实战技巧小结
Aug 25 NodeJs
详解使用PM2管理nodejs进程
Oct 24 NodeJs
nodejs async异步常用函数总结(推荐)
Nov 17 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
Jan 02 NodeJs
nodejs检测因特网是否断开的解决方案
Apr 17 NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 NodeJs
nodejs中函数的调用实例详解
Oct 31 #NodeJs
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
Oct 17 #NodeJs
Nodejs实现多文件夹文件同步
Oct 17 #NodeJs
深入理解NodeJS 多进程和集群
Oct 17 #NodeJs
CentOS7中源码编译安装NodeJS的完整步骤
Oct 13 #NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 #NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 #NodeJs
You might like
请php正则走开
2008/03/15 PHP
PHP 年龄计算函数(精确到天)
2012/06/07 PHP
PHP数据类型的总结分析
2013/06/13 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
php使用curl打开https网站的方法
2015/06/17 PHP
php数组分页实现方法
2016/04/30 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
js 字符串操作函数
2009/07/25 Javascript
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
extjs两个tbar问题探讨
2013/08/08 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JavaScript日期时间与时间戳的转换函数分享
2015/01/31 Javascript
去除html代码里面的script正则方法
2016/05/19 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
jQuery实现表格隔行换色
2018/09/01 jQuery
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
一张图带我们入门Python基础教程
2017/02/05 Python
Python中Threading用法详解
2017/12/27 Python
详解python解压压缩包的五种方法
2019/07/05 Python
澳大利亚运动鞋商店:Platypus Shoes
2019/09/27 全球购物
心得体会怎么写
2013/12/30 职场文书
消防器材管理制度
2014/01/28 职场文书
小学生操行评语大全
2014/04/22 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2015高考寄语集锦
2015/02/27 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers