來學習一下怎麼使用postcss吧

網上關於postcss是什麼的介紹真的是太多了。。。
簡單粗暴的說，postcss就是一款相似babel的樣式轉換器!
多說無益，下面就用一個demo來演示一下postcss的用法。

初始化目錄

cd ~/workspace/postcss #進入你本身的工具目錄
mkdir postcss
cd postcss
mkidr css
npm init #初始化package.json，一路回車便可

編寫測試的css文件

進入到css目錄，新建一個index.css文件，鍵入以下內容：

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

安裝相關npm包

npm install gulp gulp-postcss --save #安裝須要的包，這裏使用gulp來構建、打包

編寫gulpfile.js

postcss文件夾根目錄新建一個gulpfile.js文件，鍵入以下內容：

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

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

執行gulp css，測試一下打包是否正常！

查看生成的build/index.css文件，和原始文件同樣。
由於目前processors數組尚未加入任何插件！

增長autoprefixer插件

修改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;
    });
}

從新執行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;
}

增長resolveVar插件

修改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;
    });
}

從新執行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;
}

增長px2rem插件

修改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;
    });
}

從新執行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;
}

通過了上面這三個簡單的processor以後，相信你們對postcss的認識會更直白一點了吧。。。

postcss插件

autoprefixer

npm install autoprefixer --save

和以前咱們本身實現autoprefixer的相似，只不過這個插件作的更好更全一點。

precss

npm install precss --save

press語法和Sass極其類似，你能夠絕不費力的使用它。

如何使用

和上面的同樣，加入到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行
 */

爲了驗證插件確實生效了，修改一下css文件，以下：

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

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

執行gulp css再次從新打包，結果以下：

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;
}

這裏就介紹這兩個插件來拋磚引玉一下！其實大部分都會使用postcss已有的一些插件，而不多本身去造輪子。固然，若是你有這樣的特殊需求或者想學習一下，但願上面那三個例子能夠幫到你，你們加油！