ネット上ではpostcssとは何かの紹介が本当に多すぎます...簡単に言えば、postcssはbabelのようなスタイルの変換器です!余計なことを言うと、postcssの使い方を1つのdemoで説明します.

ディレクトリの初期化

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

px 2 remプラグインを追加

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

以上の3つの簡単な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;
}

ここではこの2つのプラグインを紹介してレンガを投げて玉を引く!実はほとんどpostcssの既存のプラグインを使っていますが、自分で車輪を作ることはめったにありません.もちろん、もしあなたがこのような特殊な需要があるならばあるいは勉強したいならば、上の3つの例があなたを助けることができることを望んで、みんなは頑張ります!