基于node实现的批量转换px到rem的工具

背景

在项目中需要通过rem单位来实现页面适配不同分辨率,之前都是通过设置计算的比例为10或100手动计算,或者IDE提供的插件来实现,现在考虑通过node来实现一个通用的批量转换项目中的样式文件中单位的工具。

实现

开发的思路是以文件为单位,按文件来批量转换,这时只需要设置一些与文件相关的配置项来选择需要转换的文件即可,而转换的算法利用了css插件,通过使用插件取得样式后再依次转换即可。

使用

  • 安装
yarn add node-px2rem-converter -D
  • 初始化
"./node_modules/.bin/px2rem" -I
  • 开始转换
"./node_modules/.bin/px2rem" -R

初始化以后,插件自动在项目的根目录中生成一个名为px2rem.yml的配置文件,在转换之前需要设置一些配置项,如配置转换的文件位置和计算的比例等。

配置文件

includeDirs

执行转换的目录的路径,默认为src目录

excludeDirs

不执行转换的目录的路径

excludeFiles

不执行转换的文件的路径,这个配置和excludeDirs都是在includeDirs中过滤对应的目录和文件

includeFiles

执行转换的文件的路径,这里的文件与目录的设置是单独的,文件可以不在已设置的转换目录中,同时目录和设置不转换的文件配置不会影响此设置

fileTypes

执行转换的文件的类型,默认为cssless,目前只支持cssless类型的文件,后续开发时考虑加入其他类型的文件

ratio

转换的比例设置,默认为100

eol

使用的换行符,可以选择\n\r\n两种的一种,默认为当前系统默认的换行符

资源地址

node-px2rem

node-px2rem-converter

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值