摘要：如何使用和上面的一樣，加入到即可，如下此處省略行此處省略行此處省略行為了驗(yàn)證插件確實(shí)生效了，修改一下文件，如下執(zhí)行再次重新打包，結(jié)果如下這里就介紹這兩個(gè)插件來(lái)拋磚引玉一下其實(shí)大部分都會(huì)使用已有的一些插件，而很少自己去造輪子。

網(wǎng)上關(guān)于postcss是什么的介紹真的是太多了。。。
簡(jiǎn)單粗暴的說(shuō)，postcss就是一款類似babel的樣式轉(zhuǎn)換器!
多說(shuō)無(wú)益，下面就用一個(gè)demo來(lái)演示一下postcss的用法。

cd ~/workspace/postcss #進(jìn)入你自己的工具目錄
mkdir postcss
cd postcss
mkidr css
npm init #初始化package.json，一路回車即可

進(jìn)入到css目錄，新建一個(gè)index.css文件，鍵入如下內(nèi)容：

button {
    border-radius: 4px;
    transition: all 0.8s;
    color: $red;
    width: 100px;
}

npm install gulp gulp-postcss --save #安裝需要的包，這里使用gulp來(lái)構(gòu)建、打包

postcss文件夾根目錄新建一個(gè)gulpfile.js文件，鍵入如下內(nèi)容：

var gulp = require("gulp");
var postcss = require("gulp-postcss");

gulp.task("css", function() {
    //postcss處理器列表，暫時(shí)為空
    var processors = [];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

執(zhí)行gulp css，測(cè)試一下打包是否正常！

查看生成的build/index.css文件，和原始文件一樣。
因?yàn)槟壳?b>processors數(shù)組還沒有加入任何插件！

修改gulpfile.js，完成后如下：

var gulp = require("gulp");
var postcss = require("gulp-postcss");

gulp.task("css", function() {
    var processors = [
        autoprefixer
    ];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

重新執(zhí)行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: $red;
    width: 100px;
}

修改gulpfile.js，完成后如下：

var gulp = require("gulp");
var postcss = require("gulp-postcss");

gulp.task("css", function() {
    var processors = [
        autoprefixer,
        resoleVar
    ];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

function resoleVar(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "color" && decl.value.indexOf("$red") > -1) {
            decl.value = decl.value.replace("$red", "#f00");
        }
        return decl;
    });
}

重新執(zhí)行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 100px;
}

修改gulpfile.js，完成后如下：

var gulp = require("gulp");
var postcss = require("gulp-postcss");

gulp.task("css", function() {
    var processors = [
        autoprefixer,
        resoleVar,
        px2rem
    ];
    return gulp.src("./css/*.css")
        .pipe(postcss(processors))
        .pipe(gulp.dest("./build/"));
});

function autoprefixer(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "border-radius" || decl.prop === "transition") {
            decl.cloneBefore({prop: "-moz-" + decl.prop});
            decl.cloneBefore({prop: "-o-" + decl.prop});
            decl.cloneBefore({prop: "-webkit-" + decl.prop});
        }
        return decl;
    });
}

function resoleVar(css) {
    css.walkDecls(function(decl) {
        if (decl.prop === "color" && decl.value.indexOf("$red") > -1) {
            decl.value = decl.value.replace("$red", "#f00");
        }
        return decl;
    });
}

function px2rem(css) {
    css.walkDecls(function(decl) {
        if(/d+px/.test(decl.value)) {
            decl.value = decl.value.replace(/d+px/, function(dest) {
                return parseInt(dest) / 20 + "rem";
            })
        }
        return decl;
    });
}

重新執(zhí)行gulp css打包，完成后查看`build/index.css"，如下：

button {
    -moz-border-radius: 0.2rem;
    -o-border-radius: 0.2rem;
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 5rem;
}

經(jīng)過了上面這三個(gè)簡(jiǎn)單的processor之后，相信大家對(duì)postcss的認(rèn)識(shí)會(huì)更直白一點(diǎn)了吧。。。

npm install autoprefixer --save

和之前我們自己實(shí)現(xiàn)autoprefixer的類似，只不過這個(gè)插件做的更好更全一點(diǎn)。

npm install precss --save

press語(yǔ)法和Sass極其相似，你可以毫不費(fèi)力的使用它。

和上面的一樣，加入到processors即可，如下：

/**
 * 此處省略N行
 */
var autoprefixer = require("autoprefixer");
var precss = require("precss");
/**
 * 此處省略N行
 */
    var processors = [
        autoprefixer({browsers: ["last 10 version"], cascade: false, remove: false}),
        resoleVar,
        px2rem,
        precss
    ];
/**
 * 此處省略N行
 */

為了驗(yàn)證插件確實(shí)生效了，修改一下css文件，如下：

button {
    border-radius: 4px;
    transition: all 0.8s;
    color: $red;
    width: 100px;
    box-sizing: border-box;
}

.menu {
    a {
        text-decoration: none;
    }
}

執(zhí)行gulp css再次重新打包，結(jié)果如下：

button {
    -webkit-border-radius: 0.2rem;
    border-radius: 0.2rem;
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    color: #f00;
    width: 5rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu a {
    text-decoration: none;
}

這里就介紹這兩個(gè)插件來(lái)拋磚引玉一下！
其實(shí)大部分都會(huì)使用postcss已有的一些插件，而很少自己去造輪子。
當(dāng)然，如果你有這樣的特殊需求或者想學(xué)習(xí)一下，希望上面那三個(gè)例子可以幫到你，大家加油！