bQNavlzYJ

23朵毒蘑菇

node脚本自动化替换css单位 px 为 rem。

经常需要替换px,转成rem,写的时候用px顺手,然后写完就麻烦了。

npm,node

2023-09-14 17:40:27 已有版本 1 个 show:0.7kTYPE: blog

需求

一个项目里面有大屏的,管理端的,大屏的需要转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的库来操作,我这样的就够用了

记录一下方便以后可能会替换其他的