深入postcss学习（一）

关注postcss已久，要按第一次知道，是几年前的事了，但从未对其深入研究过，一直是“有你没你都挺好”的状态，但其实这样并不好，就好比，你懂js，那你学jq、angular、react这些都没用么，显然不是，总有它的长处，不能因为自己的懒学和懒用，就认为其“无用”。

postcss是什么？

它是个“工具箱”，箱子里可以放入多种不同功能的工具，而这些工具可以帮助开发者提升效率、降低成本，就这样。

它能做什么

或许你所听说过的东西它都能做，比如：

• autoprefixer——添加兼容代码前缀
• stylelint——检测语法错误
• stylefmt——格式化
• cssnano——压缩代码
• postcss-sorting——整理代码
• postcss-sprites——生成雪碧图，等等

你不知道的，它也可以做到，比如：

• doiuse——检测所写代码的浏览器支持情况
• postcss-preset-env——允许你马上使用未来的css特性
• font-magician——生成图标字体规则，等等

当然，远不止这么多，会在后续逐渐深入的时候一一介绍。

怎么用

使用postcss的方法有很多，最便利的，还是结合工具，比如我们熟知的gulp、webpack等（此处以gulp为例）。

如果你会用到postcss，肯定已经不是新手，多余细节我们省去。

新建一个demo文件夹，比如就叫“postcss”。

进入目录，初始化

npm init
复制代码

没有特别要求的话，一路回车下去即可，会自动生成一个package.json文件，这个文件里会描述项目的概况和一些依赖信息。

随后需要安装gulp

npm install -g gulp
复制代码

完成后安装postcss

npm install --save-dev gulp-postcss
复制代码

因为使用的是gulp，所以安装的是 gulp-postcss。

这些都可以用命令行来完成，如果你觉得切换编辑器和命令行比较繁琐，推荐使用 Visual Studio Code ，它可以让你在编辑器中使用命令行。

到这里是否大功告成了呢？No!这仅仅是开始。

用起来

为什么说仅仅是开始，前面就提了，它只是工具箱，而非工具，没有工具，什么都做不了，所以，要往里面放工具。

万事开头难，咱们拿最简单的开刀。

npm install --save-dev autoprefixer
复制代码

这款插件无需赘述，看名字就知道是干嘛的，安装完之后，我们只需要在gulpfile里这样配置就好：

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

    gulp.task('styles',function(){
        return gulp.src('src/*.css')
        .pipe(postcss([ autoprefixer ]))
        .pipe(gulp.dest('dest/'));
    });
复制代码

然后我们要做的就是，新建一个文件夹，在里面放一个css文件，至于名称叫什么都行（这里是src），只要能够匹配。内容是这样： （尽量选择一些大概率需要兼容的代码，否则你可能看不到任何变化）

    .box{
        transform: translate(50px);
        filter:blur(5px);
    }
复制代码

完成后，在命令行里敲

gulp styles
复制代码

即可，如果一切顺利，会自动生成一个dest文件夹，里面有个处理后的css文件，变成了这样：

    .box{
        -webkit-transform: translate(50px);
                transform: translate(50px);
        -webkit-filter:blur(5px);
                filter:blur(5px);
    }
复制代码

当然，这里生成什么不是固定的，可以根据项目需要进行浏览器类型和版本的设置，比如兼容IE、火狐、opera等。

小结

作为系列文章的第一篇，到此就差不多了，因为其他那些插件的使用也无非是类似的过程，如果需要，下篇的开头会给出简单示例，然后就进入可能多数人并不十分熟悉的领域，那才是你更感兴趣的部分，我猜。

下次见！~

转载于:https://juejin.im/post/5c9e3a416fb9a05e2a300dd8