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 25 NodeJs
windows下安装nodejs及框架express
Aug 07 NodeJs
使用NodeJs 开发微信公众号(三)微信事件交互实例
Mar 02 NodeJs
详解Nodejs基于mongoose模块的增删改查的操作
Dec 21 NodeJs
利用nodejs监控文件变化并使用sftp上传到服务器
Feb 18 NodeJs
详解nodejs微信公众号开发——3.封装消息响应模块
Apr 10 NodeJs
配置nodejs环境的方法
May 13 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
nodejs微信扫码支付功能实现
Feb 17 NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 NodeJs
NodeJs 文件系统操作模块fs使用方法详解
Nov 26 NodeJs
Nodejs实现WebSocket代码实例
May 19 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
轻松修复Discuz!数据库
2008/05/03 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP后期静态绑定之self::限制实例分析
2018/12/21 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
2020/01/26 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
毕业生个人求职信范文分享
2014/01/05 职场文书
大学生实习思想汇报
2014/01/12 职场文书
教学实习自我评价
2014/01/28 职场文书
2014年环保工作总结
2014/11/26 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android