需求
一个项目里面有大屏的,管理端的,大屏的需要转rem,管理端的不需要转。
手动替换还要自己去计算一次,vscode的全局替换又不能执行函数,所以只能写一个脚本来替换了
/**
* 将相应文件中的px转成rem,方便替换
* 手动替换麻烦的很
*/
const {glob} = require('glob');
const path = require('path');
const fs = require('fs');
/**
* 遍历需要替换的文件
*/
glob('src/views/bigScreen/**/*.vue', {
ignore:['node_modules/**','dist/**','biuld.js','.git/**'],
dot:true,
}).then((files) =>{
console.log('需要替换的文件数目: '+files.length);
console.log('替换开始');
files.forEach((item)=>{
// 定义一个替换函数
function replacePxWithRem(match, p1) {
// 将捕获的数字 p1 转换为 rem,并保留三位小数
var remValue = (1 / 16 * parseInt(p1)).toFixed(3);
// 返回替换后的字符串
return remValue + "rem";
}
const path_ = path.join(__dirname,'../',item);
let content = fs.readFileSync(path_, "utf8");
content = content.replace(/\b(\d+)px\b/g, replacePxWithRem);
fs.writeFileSync(path_, content, "utf8");
console.log('替换成功:'+item);
});
console.log('替换结束');
}).catch((e)=>{
console.log(e);
});
整体来说是个非常简单的脚本,用正则找到px然后进行替换,也可以装一些解析css的库来操作,我这样的就够用了
记录一下方便以后可能会替换其他的