关注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等。
小结
作为系列文章的第一篇,到此就差不多了,因为其他那些插件的使用也无非是类似的过程,如果需要,下篇的开头会给出简单示例,然后就进入可能多数人并不十分熟悉的领域,那才是你更感兴趣的部分,我猜。
下次见!~