px 转 rem---gulp 插件

[nilhave]

最近有了离职的打算，于是，便又走上了漫漫求职路！（又。。。）

面试过程中，遇到一个如何百分之百还原移动端页面的问题。因为之前一直都是在小公司，对页面质量没有那么高的标准，加之对自己要求也不是特别高。于是我便是用了一个便捷方式---眼神测距，然后使用媒体查询，设置几个区间，写相应的样式，最后还原度大概也就 50-70 之间了。

面试完回来想想，确实，自己做的还不够细致。于是，认认真真得看了一些资料，发现使用 10rem=device-width 来制作手机端页面的便利之处。例如

遵循此道，开始了我新的切页面之路，当然故事并没有到此结束。由于页面中存在大量的宽、高、内间距、外边距，这样就会有大量的计算，幸好我还知道使用工具，不然，做一个页面，半条命估计都要搭进去。搜索了一下，发现 sublime 上有一个 cssrem 的插件，可以将 px 转换成 rem （如果你想知道如何使用，可以由此进入）。在插件的帮助下，没有做除法，便完成了一个页面。

当然，新的插件，也会带来新的问题。在做的过程中，遇到了这样的问题：转换成 rem 后，原 px 值便不会再看到了，如果出现修改设计图尺寸的情况，哪一个 rem 需要修改，哪一个不需要修改无从得知，于是，便只能挨个继续转换了。

我想，如果可以做一个这样的 gulp 插件：开发文件中使用 px 作为单位，通过该插件，测试 /正式文件均转换成 rem 作为单位。那么，我在开发过程中，使用的就一直是像素了，也就又回到了开发 pc 页面的时候了。

国庆期间，研究了 gulp 插件该如何写，并经历千辛万苦终于将插件制作完成。

如果对这个插件有使用的想法，可以继续看下去。但是使用该插件有一点基础要求，就是至少的会使用 gulp ，如果不会的话，可以点击gulp 中文网学习之后，再来看这个插件的使用。

一、下载插件（切换到自己的项目文件夹）

npm install gulp-px2rem-plugin --save-dev

二、调用

var gulp = require('gulp');
var px2rem = require('gulp-px2rem-plugin');

gulp.task('default', function() {
	gulp.src('*.css')
	  	.pipe(px2rem())
});

通过上面代码，已经可以实现功能了。但是，如果你

1. 设计稿的宽度不是 640px
2. 生成 rem 后的小数位数不想是 4 位
3. 不想设置 10rem=device-width

那么你还需要这样设置

gulp.task('default', function() { gulp.src('*.css') .pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10})); }); width_design ：设计稿宽度。默认值 640 valid_num ：生成 rem 后的小数位数。默认值 4 pieces ：将整屏切份。默认为 10 ，相当于 10rem = device-width

当然，你还可以配合其他的 gulp 插件使用

var gulp = require('gulp'),
px2rem = require('gulp-px2rem-plugin'),
minifycss = require('gulp-minify-css');//压缩 css 等

gulp.task('default', function() {
	gulp.src('*.css')
		.pipe(.pipe(px2rem({'width_design':750,'valid_num':6,'pieces':10}));)
		.pipe(minifycss()) 
		.pipe(gulp.dest('./dest'));
});

当然，为了更好的发挥这个插件的效果，你可以在页面上加上这段代码：

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
                docEl.style.fontSize = clientWidth / pieces;
                //pieces 当然是你在插件中设置的参数了
        };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

到此，使用方法结束，如果对插件有什么意见，或者还有什么使用上的问题，都可以 @我。

附加插件的 github 地址： https://github.com/nilhave/gulp-px2rem-plugin

[leopku]

mark 一下

[nilhave]

@leopku 3q