为什么使用PostCSS？

什么是PostCSS？

PostCSS是什么？最好的定义来自于PostCSS自身项目在github上的描述：

PostCSS is a tool for transforming CSS with JS plugins.These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

PostCSS基于js插件去转换css的一个工具。这些插件支持变量，mixin，未来的css语法，在线图片甚至更多。

所以PostCSS只是一个转化css的工具，让我们更好的去写css

编译速度快

编译同一个文件，不同编译器的编译时间如下

一些常用插件

autoprefixer是PostCSS最著名的一款插件，就不过多介绍了，相信同学们都使用过。
postcss-cssnext (内置autoprefixer) 允许你使用未来的css语法，如css4（可以理解为css中的Babel）
postcss-sprites 自动制作雪碧图，不用手动拼接啦，哈哈哈
cssnano 压缩css代码(如果你是用webpack的话，css-loader集成了cssnano，你不需要再次引入)
postcss-hash-classname 把转换后的css文件名附上哈希值
pixrem 将rem转换为px
postcss-px-to-viewport 将px转换为vh和vw（推荐作为移动端的计量单位，而不是rem）
postcss-pxtorem 将px转换为rem

用法

npm构建

先用npm安装脚手架

npm i -g|-D postcss-cli

命令行通过PostCSS输出css

postcss –use autoprefixer -c options.json -o main.css css/*.css

具体用法请点击github官网：https://github.com/postcss/postcss-cli

Webpack

首先安装postcss-loader

npm install postcss-loader –save-dev

webpack配置：

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        ]
    }
}

并且你需要在项目根目录下配置一个postcss.config.js文件，以autoprefixer为例:

//postcss.config.js

module.exports = {
  plugins: {
    'autoprefixer': {
        browsers: '> 5%',
        grid: true
    }
  }
}

gulp

安装gulp-postcss和gulp-sourcemaps
配置如下：

gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');

    return gulp.src('src/**/*.css')
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('precss'), require('autoprefixer') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( gulp.dest('build/') );
});

参考链接：1.w3cplus2.PostCSS的github官网