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 提示‘xxx’ 不是内部或外部命令解决方法
Nov 20 NodeJs
nodejs事件的监听与触发的理解分析
Feb 12 NodeJs
Nodejs如何搭建Web服务器
Mar 28 NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 NodeJs
Nodejs多站点切换Htpps协议详解及简单实例
Feb 23 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
让nodeJS支持ES6的词法----babel的安装和使用方法
Jul 31 NodeJs
关于Mac下安装nodejs、npm和cnpm的教程
Apr 11 NodeJs
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
May 15 NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
Apr 29 NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 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文件下载处理方法分析
2015/04/22 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
微信小程序 详解页面跳转与返回并回传数据
2017/02/13 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
bootstrap datetimepicker控件位置异常的解决方法
2017/11/23 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
2020/02/06 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
python 正则表达式 概述及常用字符
2009/05/04 Python
详解python做UI界面的方法
2019/02/27 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
python系列 文件操作的代码
2019/10/06 Python
python opencv实现图像配准与比较
2021/02/09 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
十佳文明家庭事迹
2014/05/25 职场文书
社区维稳工作方案
2014/06/06 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
先进集体申报材料
2014/12/25 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python
MySQL索引失效场景及解决方案
2022/07/23 MySQL