px2rem可以自動(dòng)的把你的css代碼px單位轉(zhuǎn)換成rem單位，可以實(shí)現(xiàn)邊編輯邊轉(zhuǎn)換润樱，在開發(fā)手機(jī)網(wǎng)站是可以很 高效率的工作脉幢，同時(shí)也存在一些弊端。就是你在瀏覽器里調(diào)試px單位時(shí)竣蹦，不太方便，沧奴，總之利大于弊痘括。
第一步：
你的電腦必須已經(jīng)安裝node.js,沒有安裝node的可以去node官網(wǎng)(https://nodejs.org/en/)下載并安裝；
第二步：
1. 全局安裝gulp環(huán)境滔吠；命令行輸入以下代碼：
命令行輸入( npm install gulp -g ) 全局安裝gulp纲菌；
2. 全局安裝完成之后，需要進(jìn)入到具體的項(xiàng)目根目錄里再安裝一次疮绷；
命令行輸入( npm install gulp ) 項(xiàng)目安裝gulp翰舌；
第三步：
1. 安裝postcss, 命令行輸入
Paste_Image.png
2. 安裝成功會(huì)顯示如下圖：
Paste_Image.png
3. 項(xiàng)目node_modules文件夾里會(huì)出現(xiàn)，下圖文件：
Paste_Image.png
;
第四步：
1. 配置gulpfile.js文件
JavaScript
//導(dǎo)入工具包 require('node_modules里對(duì)應(yīng)模塊')
var gulp = require('gulp'), //本地安裝gulp所用到的地方
less = require('gulp-less');
//定義一個(gè)testLess任務(wù)（自定義任務(wù)名稱）
gulp.task('testLess', function () {
gulp.src('src/less/index.less') //該任務(wù)針對(duì)的文件
.pipe(less()) //該任務(wù)調(diào)用的模塊
.pipe(gulp.dest('src/css')); //將會(huì)在src/css下生成index.css
});
gulp.task('default',['testLess', 'elseTask']); //定義默認(rèn)任務(wù)
//gulp.task(name[, deps], fn) 定義任務(wù) name：任務(wù)名稱 deps：依賴任務(wù)名稱 fn：回調(diào)函數(shù)
//gulp.src(globs[, options]) 執(zhí)行任務(wù)處理的文件 globs：處理的文件路徑(字符串或者字符串?dāng)?shù)組)
//gulp.dest(path[, options]) 處理完后文件生成路徑
第五步：
運(yùn)行命令 gulp（默認(rèn)任務(wù)名：default） 或 gulp 任務(wù)名
通過package.json文件安裝插件冬骚，先配置package.json文件椅贱，命令行輸入npm install懂算，就可以安裝 package.json里的插件了。庇麦。
想通過命令行寫package.json文件犯犁，輸入npm install -save-dev gulp-postcss，就可以實(shí)現(xiàn)安裝插件的同時(shí)女器，把插件同時(shí)寫進(jìn)package.json文件，多人同時(shí)開發(fā)是住诸，一個(gè)人配置好之后驾胆，發(fā)個(gè)別人package.json文件，直接安裝就可以用贱呐，很方便快捷丧诺，又避免多人各自安裝出現(xiàn)各種問題。
