博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG
阅读量:6923 次
发布时间:2019-06-27

本文共 5761 字,大约阅读时间需要 19 分钟。

需求描述,由于工作的需要,需要将原本用于1280 720的网页改为1920 1080的网页(电视端页面)。需求可以拆分为两部分,代码部分的修改以及图片的修改。在代码部分,需要将所有位置以及大小相关的值乘以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 
' 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 ? '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);        }    })}

至此,功能就完成了。

比较有感触的是在操作代码中相关位置以及大小的实现过程,碰到了一些困难,开始的时候不知道如何去找到文件中所有符合条件的字符,另外不知道如何替换找到的字符,平时用的都是字符串replace方法,但是replace方法会替换掉所有的符条件的地方。后来根据索引和长度来实现定位和替换。图片的操作就是百度之后根据别人写的来做的,借助ImageMagic工具还是能实现非常丰富的功能,具体的可见gm的GitHub。但是放大的api不能支持小数位的放大,需要多走一步,首先获取当前大小,然后再设置大小。同样在图片的放大过程中,会发生拉伸变模糊的问题,如果对图片的质量有较高要求的话,最后还是通过美工来做。能够弥补下美工缺乏的问题。

猜到的坑是replace方法,replace方法是不会改变原字符串的。

这次能够顺利完成主要得益于正则表达式,学好正则表达式对于数据的处理还是非常重要的。后面再对正则表达式总结学习一下,以此完成知识的输出。

转载地址:http://gjecl.baihongyu.com/

你可能感兴趣的文章
搭理AD域控服务器
查看>>
FTP HA windows cluster
查看>>
139.00.007 Git学习-Cheat Sheet
查看>>
js的基本数据类型有哪些?
查看>>
html 5 新增标签及简介
查看>>
c#多线程中Lock()关键字的用法小结
查看>>
征服恐惧!用 Vim 写 iOS App
查看>>
Struts_登录练习(配置拦截器)
查看>>
ASP.NET Core 2.0 使用支付宝PC网站支付
查看>>
centos7安装mha4mysql
查看>>
Android ListView和ListAdapter(附电话簿实例)
查看>>
Linux磁盘管理之LVM详解
查看>>
我的友情链接
查看>>
关于通达Oa的一些问题,raid,论坛
查看>>
我的友情链接
查看>>
WindowsXP系统中如何设置静态IP地址
查看>>
2017-11-06-构建之法:现代软件工程-阅读笔记
查看>>
bzoj 1221: [HNOI2001] 软件开发
查看>>
我的友情链接
查看>>
Linux下的文件及文件权限
查看>>