将css文件中的px转化为rem

pxToRem.js

/*** 使用方式:* 与引入的文件放在同一目录下进行引用配置,执行:node (定义的文件)*/
const fs = require('fs')
const path = require('path')
/*** entry:入口文件路径 type:Strng* pxtopx:以倍数转化px数值,计算方式为除法 ,type:Boolean* pxtorem:以倍数转化rem数值,计算方式为除法 ,type:Boolean* baseNumber:指定除数的基数,type:Number* includeFileTypeList:指定包含的文件类型后缀,type:Array* excludeFile:不包括的文件,可以是路径,type:Array*/
class pxToRemUtil {/*** @type {entry: String, pxtopx: boolean, pxtorem: boolean, baseNumber: number, includeFileTypeList: Array, excludeFile: Array}* @param {初始化参数} option*/constructor(option) {if (!option) {this._logError('请传入配置参数')process.exit(0)}if (!option.entry || !option.entry.trim()) {this._logError('未指定入口文件,请指定')process.exit(0)}if (!option.pxtopx && !option.pxtorem) {this._logError('未指定pxtopx或者pxtorem,检查配置')process.exit(0)}if (!option.baseNumber) {this._logError('未指定基数')process.exit(0)}if (option.pxtopx && option.pxtorem) {this._logError('未指定pxtopx或者pxtorem错误,检查配置')process.exit(0)}this._beginPath = option.entrythis._pxtopx = option.pxtopxthis._pxtorem = option.pxtoremif (this._pxtopx) this._unit = 'px'if (this._pxtorem) this._unit = 'rem'this.BASENUMBER = option.baseNumberthis._includeFileTypeList = option.includeFileTypeList || []this._excludeFile = option.excludeFile || []this._timer = nullthis._fileNumber = 0this._writeFileTimer = nullthis._arr = []this.getRegFile()this.sureHandler()}getRegFile() {let _strconnect = ''this._includeFileTypeList.forEach(item => {_strconnect += `(${item})$|`})_strconnect = _strconnect.length > 1 ? _strconnect.slice(0, _strconnect.length - 1) : ''_strconnect = this._includeFileTypeList.length > 0 ? '^.+' + _strconnect : ''this.regFile = new RegExp(_strconnect)}sureHandler() {process.stdin.setEncoding('utf8')process.stdout.write('此操作不可逆,确认是否进行(Y/n)?')process.stdin.on('data', input => {input = input.toString().trim()if (['Y', 'y', 'YES', 'yes'].indexOf(input) > -1 || !Boolean(input)) {this.fileDisplay(this._beginPath, this.changeFile.bind(this))}if (['N', 'n', 'NO', 'no'].indexOf(input) > -1) process.exit(0)})}fileDisplay(url, cb) {const filePath = path.resolve(url)fs.readdir(filePath, (err, files) => {if (err) return console.error('Error:(spec)', err)files.forEach(filename => {const filedir = path.join(filePath, filename)fs.stat(filedir, (eror, stats) => {if (eror) return console.error('Error:(spec)', err)const isFile = stats.isFile()const isDir = stats.isDirectory()if (isFile) {let exclude = this._excludeFile.some(item => {return filedir.includes(item)})let checkIsImage = filedir.match(/\.(png|jpg|gif|jpeg|webp|ttf|svg)$/)if (filedir.match(this.regFile) && !exclude && !checkIsImage) {this._arr.push({modified: false,path: filedir.replace(__dirname, '').replace(/\\/gim, '/'),})}if (this._timer) clearTimeout(this._timer)this._timer = setTimeout(() => cb && cb(this._arr), 200)}// 如果是文件夹if (isDir) this.fileDisplay(filedir, cb)})})})}changeFile() {/**重新写入文件 替换掉文件的px数值 */const self = thisthis._arr.forEach(item => {fs.readFile('.' + item.path, (err, data) => {let result = data.toString()var reg = /(\-|- |\+ )?([0-9]*\.[0-9]*|\d)+(px\)?)/gilet newStr = result.replace(reg, function (_x) {item.modified = truelet n = _x.search(/px\)/) >= 0 ? 'px\\)' : 'px'let reg = new RegExp(eval(`/(- |\\+ )+([0-9]*\\.[0-9]*|\\d)+${n}/gi`))if (_x.match(reg)) {let C = ''if (_x.search(/\+/) >= 0) {C = '+'} else if (_x.search(/\-/) >= 0) {C = '-'}if (_x.search(/px\)/)) _x = _x.replace(/(- |\+ )/, '').replace(/px/i, '')if (_x.search(/\)/) >= 0) return `${C} ` + parseFloat(_x) / self.BASENUMBER + `${self._unit})`if (!_x.search(/\)/) >= 0) return `${C} ` + parseFloat(_x) / self.BASENUMBER + `${self._unit}`}return parseFloat(_x) / self.BASENUMBER + `${self._unit}`})const opt = {flag: 'w',}if (newStr) {fs.writeFile('.' + item.path, newStr, opt, (err, success) => {if (this._writeFileTimer) clearTimeout(this._writeFileTimer)this._writeFileTimer = setTimeout(() => {this._logSuccess(self._fileNumber + ' 个文件写入成功')process.exit(0)}, 200)if (err) {this._logError(err)process.exit(0)} else {if (item.modified) {self._fileNumber++this._logSuccess('更改并写入:' + item.path.slice(1) + ' 成功')}}})}})})}_logSuccess(str) {console.log('\x1B[32m%s\x1B[39m', str)}_logError(str) {console.log('\x1B[31m%s\x1B[39m', str)}
}
module.exports = pxToRemUtil 

execFile.js

//将上面文件引入
let pxToRemUtil = require('./pxToRemUtil')/*** 接受的参数含义* entry:入口文件路径 type:Strng* pxtopx:以倍数转化px数值,计算方式为除法 ,type:Boolean* pxtorem:以倍数转化rem数值,计算方式为除法 ,type:Boolean* baseNumber:指定除数的基数,type:Number* includeFileTypeList:指定包含的文件类型后缀,type:Array* excludeFile:不包括的文件,可以是路径,type:Array*/
new pxToRemUtil({entry:'./',//需要修改的文件入口pxtorem:true,//设置为px转rembaseNumber:100,//将整体的数值除100,例如10px变成0.1remexcludeFile:[''],//可选值,排除的文件名includeFileTypeList:['.vue','.css']//可选值,包含改那些文件的后缀list
})

然后再控制台中执行:

node execFile.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/22474.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS_判断打开的是什么手机品牌,判断是否是手机,平板,pc

判断业务是否是 iphone、华为、小米、oppo、view、三星 打开 手机品牌userAgent库 http://www.fynas.com/ua function judgeBrand(sUserAgent) {var isIphone sUserAgent.match(/iphone/i) iphone;var isHuawei sUserAgent.match(/huawei/i) huawei;var isHonor sUserAge…

【LNMP】LNMP

LNMP:是目前成熟的企业网站的应用模式之一,指的是一套协同工作的系统和相关软件;能够提供静态页面服务,也可以提供动态web服务 L Linux系统,操作系统N Nginx网站服务,前端,提供前端的静态…

神策新一代分析引擎架构演进

近日,神策数据已经推出全新的神策分析 2.5 版本,该版本支持分析模型与外部数据的融合性接入,构建全域数据融合模型,实现从用户到经营的全链路、全场景分析。新版本的神策分析能够为企业提供更全面、更有效的市场信息和经营策略&am…

Springboot部署ELK实战

Springboot部署ELK实战 1、部署docker、docker-compose环境安装docker安装docker-compose 2、搭建elk1、构建目录&&配置文件1、docker-compose.yml 文档2、Kibana.yml3、log-config.conf 2、添加es分词器插件3、启动 3、Springboot项目引入es、logStash配置1、引入依赖…

【雕爷学编程】MicroPython动手做(27)——物联网之掌控板小程序2

知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…

数据治理实践:元数据管理架构的演变

数据治理实践:元数据管理架构的演变 前言 近几年来数据的量级在疯狂的增长,由此带来了系列的问题。作为对人工智能团队的数据支撑,我们听到的最多的质疑是 “正确的数据集”,他们需要正确的数据用于他们的分析。我们开始意识到&…

MyBatis-动态SQL-if-案例

案例 完善更新员工的功能,修改为动态更新员工数据信息原代码如下: Update("update emp\n" "set username #{username},\n" " name#{name},\n" " gender#{gender},\n" " image#{image},\n…

如何去除 JavaScript 对象中的空值和空对象

在 JavaScript 开发中,我们经常需要处理对象数据,但有时这些对象可能包含一些空值或空对象。在处理数据时,通常需要将这些空值或空对象去除,以便得到更干净、更紧凑的数据结构。本文将介绍几种方法,教你如何去除 JavaS…

https请求异常引发(Received fatal alert: unrecognized_name):如何快速解决项目中问题?

总结思考:如何做一个出色的开发者? 首先我们要承认我们大部分程序员是应用开发,不是操作系统、协议、框架开发等这类底层开发者。 其一:是否能快速定位问题。如找到出现问题的代码,bug出现在哪一行,哪个应…

Django实现音乐网站 ⑷

使用Python Django框架制作一个音乐网站,在系列文章3的基础上继续开发, 本篇主要是后台歌曲类型表、歌单表模块功能开发。 目录 表结构设计 歌曲类型表结构 歌单表结构 创建表模型 创建表 后台注册表模型 引入表模型 后台自定义 总结 表结构设计…

SpringBoot使用JKS或PKCS12证书实现https

SpringBoot使用JKS或PKCS12证书实现https 生成JKS类型的证书 可以利用jdk自带的keytool工具来生成证书文件, 默认生成的是JKS证书 cmd命令如下: 执行如下命令,并按提示填写证书内容,最后会生成server.keystore文件 keytool -genkey tomcat…

在Ruoyi中采用Ajax动态生成Echarts图表实践

前言 在之前博文中,我们讲解了如何使用java在后台进行Echarts的图表生成组件,博文如下: 序号 博客连接1一款基于JAVA开发的Echarts后台生成框架2Ruoyi单体项目与Echarts4.2.1地图集成时的思路及解决办法3解决Ruoyi单体版本集成Echarts多图表时…

uni、css——制作表格样式的模型

案例展示 这里以5列做展示&#xff08;可随意调节&#xff09; 案例代码 <view class"list"><view class"item" v-for"(item,index) in list" :key"index">1</view> <!-- 有内容 --><view clas…

蓝桥 13期 java c组 特殊日期

【问题描述】 2022 年 2 月 22 日 22:20 是一个很有意义的时间&#xff0c;年份为 2022&#xff0c;由 3 个 2 和 1 个 0 组 成&#xff0c;如果将月和日写成 4 位&#xff0c;为 0222&#xff0c;也是由 3 个 2 和 1 个 0 组 成&#xff0c;如果将时间中的时和 分写成 4 位&am…

redis五种数据类型介绍

、string&#xff08;字符串&#xff09; 它师最基本的类型&#xff0c;可以理解为Memcached一模一样的类型&#xff0c;一个key对应一个value。 注意&#xff1a;一个键最大能存储 512MB。 特性&#xff1a;可以包含任何数据,比如jpg图片或者序列化的对象,一个键最大能存储512…

《Java-SE-第二十八章》之CAS

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…

SpringCloudAlibaba之Sentinel(一)流控篇

前言&#xff1a; 为什么使用Sentinel&#xff0c;这是一个高可用组件&#xff0c;为了使我们的微服务高可用而生 我们的服务会因为什么被打垮&#xff1f; 一&#xff0c;流量激增 缓存未预热&#xff0c;线程池被占满 &#xff0c;无法响应 二&#xff0c;被其他服务拖…

面向视频会议场景的 H.266/VVC 码率控制算法研究

文章目录 面向视频会议场景的 H.266/VVC 码率控制算法研究个人总结摘要为什么要码率控制码率控制的关键会议类视频码率控制研究背景视频会议系统研究现状目前基于 R-λ模型的码率控制算法的问题文章主要两大优化算法优化算法1&#xff1a;基于视频内容相关特征值的码率控制算法…

Python开发环境Spyder介绍

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 Spyder简介 Spyder (前身是 Pydee) 是一个强大的交互式 Python 语言开发环境&#xff0c; 提供高级的代码编辑、交互测试、调试等特性&#xff0c;支持包括 Windows、Linux 和 OS X 系统。 &#x1f447; &#x1f44…

14-3_Qt 5.9 C++开发指南_QUdpSocket实现 UDP 通信_UDP 单播和广播

文章目录 1.UDP通信概述2. UDP 单播和广播2.1 UDP 通信实例程序功能2.2 主窗口类定义和构造函数2.3 UDP通信的实现2.4 源码2.4.1 可视化UI设计2.4.2 mainwindow.h2.4.3 mainwindow.cpp 1.UDP通信概述 UDP(User Datagram Protocol&#xff0c;用户数据报协议)是轻量的、不可靠的…