gulp-px-to-rpx v1.0.7

gulp-px-to-rpx

install

$ npm i gulp-px-to-rpx --save-dev

Usage

把 px 转为微信小程序 rpx,设计稿宽度默认为微信官方推荐的 750 像素

0px 和 0rpx 转换为 0( 0px -> 0 , 0rpx -> 0 )

1px 不转换( 1px -> 1px , 1PX -> 1px)

大写 PX 不转换( 20PX -> 20px )

rpx 不转换( 10rpx -> 10rpx )

大于 1px 转换( 10px -> 10rpx , 2px -> 2rpx )

设计稿宽度为 750 像素：

const { src, dest } = require('gulp')
const px2rpx = require('gulp-px-to-rpx')
const less = require('gulp-less')
const rename = require('gulp-rename')
function defaultTask() {
  return src(['./*.less', './*.css', './*.wxss'])
    .pipe(less())
    .pipe(px2rpx())
    .pipe(rename({ extname: '.wxss' }))
    .pipe(dest('./dist'))
}

exports.default = defaultTask

设计稿宽度为非 750 像素时（例如设计稿为 375 像素）：

const { src, dest } = require('gulp')
const px2rpx = require('gulp-px-to-rpx')
const less = require('gulp-less')
const rename = require('gulp-rename')
function defaultTask() {
  return src(['./*.less', './*.css', './*.wxss'])
    .pipe(less())
    .pipe(
      px2rpx({
        designWidth: 375, // 设计稿宽度，默认为750
        precision: 2, //小数最大精度，默认为6
      })
    )
    .pipe(rename({ extname: '.wxss' }))
    .pipe(dest('./dist'))
}

exports.default = defaultTask

** License

gulp-px-to-rpx is Copyright © Ricksun and licensed under the MIT license. All rights not explicitly granted in the MIT license are reserved. See the included LICENSE file for more details.