首页 > 网络编程 > JavaScript > 正文

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

2018-11-10 10:01:01

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

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

// 遍历所有的文件var fs = require("fs")var path = require("path")var relativePath = '//test'// 拿到需要遍历的路径var root = path.join(__dirname)+relativePathreadDirSync(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);    }  })}

至此,功能就完成了。

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

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

您可能感兴趣的文章:

  • Node.js 使用递归实现遍历文件夹中所有文件
  • node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
  • nodejs实现遍历文件夹并统计文件大小
  • 相关标签:JavaScript
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程