热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了nodejs遍历文件夹下并操作HTMLCSSJSPNGJPG的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求描述,由于工作的需要,需要将原本用于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 '
        codeTxt += '\n '
      }
      // 将修改好内容写入当前路径的文件
      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 &#63; '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);
    }
  })
}

至此,功能就完成了。

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

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


推荐阅读
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • 本文介绍了互联网思维中的三个段子,涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例,探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验,三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]
  • 【影评】大内密探灵灵狗
    本文是对王晶执导的电影《大内密探灵灵狗》进行的影评。文章称赞了王晶的才华和导演经验,认为演员阵容强大,笑料不少,发明新奇又好笑。然而,编剧的表现被认为是本片的最大失败,宣传言过其实,笑点不多。总体来说,本片是一部典型的王式喜剧,可看性较高,但没有突破。 ... [详细]
  • 程序员如何选择机械键盘轴体?红轴和茶轴对比
    本文介绍了程序员如何选择机械键盘轴体,特别是红轴和茶轴的对比。同时还介绍了U盘安装Linux镜像的步骤,以及在Linux系统中安装软件的命令行操作。此外,还介绍了nodejs和npm的安装方法,以及在VSCode中安装和配置常用插件的方法。最后,还介绍了如何在GitHub上配置SSH密钥和git的基本配置。 ... [详细]
  • 说到C语言的语句块,真是一堆血泪史。第一大坑就是优先级。刚工作那会儿,C的书没看几本,自信满满的认为C语言都会了,拿出搞ACM培养的豪情壮志,代码倒是写得爽,却到处留 ... [详细]
  • loader资源模块加载器webpack资源模块加载webpack内部(内部loader)默认只会处理javascript文件,也就是说它会把打包过程中所有遇到的 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • npmrunbuild后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确。放到跟目录下就正常了,iis上同样只能在根目录下。我项目的目录如下: ... [详细]
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文介绍了求解gcdexgcd斐蜀定理的迭代法和递归法,并解释了exgcd的概念和应用。exgcd是指对于不完全为0的非负整数a和b,gcd(a,b)表示a和b的最大公约数,必然存在整数对x和y,使得gcd(a,b)=ax+by。此外,本文还给出了相应的代码示例。 ... [详细]
  • 关键词: ... [详细]
  • 【前端工具】nodejs+npm+vue 安装(windows)
    预备先看看这几个是干嘛的,相互的关系是啥。nodejs是语言,类比到php。npm是个包管理,类比到composer。vue是个框架&# ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
author-avatar
Happy的紫璐
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有