初窥Postcss

最近新做的项目用的是Postcss。所以就赶紧嘛尼嘛尼哄去看到底是怎么回事，发现网上找到的都是简介或者介绍，让很多想学的人就止步于门口，门都找不到怎么进。让我感到很无奈，但是经过一两周的查看，发现其实我一开始看的太简单了，为什么，因为大家普遍只写简介是有原因的，是因为这个并不是像之前的预处理器那样，直接上手看语法和规则就可以去开发了，Postcss更多是告诉你一种理念，而且俨然有一种往插件社区的趋势发展，网上很多老大写的文章就是告诉你有这个东西，然后关于插件，甚至写插件就靠你个人。勒就是Postcss。可能我上面一长串你看不懂，待我往下讲。莫着急。

关于Postcss

最近我在研究的时候，有朋友问我，这个到底是什么，我一开始看了几篇网上描述的不是很准的文章，我就脱口而出：“CSS4，下一代CSS。”这点描述勉强，很勉强算一点点对，为什么呢？来，继续讲，我再研究了几天后,fenghuang来问我你看的是啥，这次我的回答就是，我打了个比喻，LESS/SASS哪一类预处理器都给你提供好了成套的已经内置好的功能，直接就可以用，但是Postcss是你需要去他的社区加载你需要的功能插件，这样优势就出来了，看出来哪里优势了吗！社区！！！你不单单可以去加载现有的功能模块，还可以开发属于自己的功能模块，可以自己拼装项目需要的适合的功能模块。而且还有很多功能模块是别的预处理器没有的，例如你可以写css4风格的样式，Postcss会帮你处理成现在浏览器可以识别的样式。他的强大是他的功能模块可以按需加载并且有了社区的理念后，相信以后的功能会有更过可以供你使用。

官方的说话是：

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复制代码

这就难怪为什么有些文章说他是CSS4了，可能哪个人只是用他的组件然后写的CSS4的变量吧。

看到这里是不是继续能看到Postcss的潜力，有一丝丝会发展成生态的感觉。

快速搭建

简单说一下如何快速让你体验它的魅力，首先我这几天发现codepen已经支持了。所以你可以上codepen体验。

然后讲讲从gulp怎么搞。

首先创建一个项目文件夹,

通过npm先在这个目录下创建项目然后创建gulpfile和package.json这些就不用说了把，我把我的文件内容贴上来。

package.json
[v_act]{
"name": "postcss",
"version": "1.0.0",
"description": "testpostcss",
"main": "test",
"dependencies": {
"gulp": "^3.9.1",
"postcss": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"cssnext": "^1.8.4",
"gulp-postcss": "^6.0.1",
"precss": "^2.0.0"
},
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "test"
},
"keywords": [
"test"
],
"author": "deanzeng",
"license": "ISC"
}
[/v_act]

gulpfile

[v_act]var gulp = require('gulp'),
postcss = require('gulp-postcss');
autoprefixer = require('autoprefixer');
cssnext = require('cssnext');
precss = require('precss');

gulp.task('css', function () {
var processors = [
autoprefixer,
cssnext,
precss
];
return gulp.src('./src/*.css')
.pipe(postcss(processors))
.pipe(gulp.dest('./dest'));
});

gulp.task('default',['css']);

gulp.task('watch',function() {
gulp.watch('./src/*.css',['css']);
})[/v_act]

然后npm install之后就装好了，其实跟装其他很多插件是一样的，只不过这里需要提到的就是这里要添加的是postcss插件的插件。

var processors = [
  	   autoprefixer,
  	   cssnext,
  	   precss
    ]
复制代码

安装到本地项目require进来之后，记得要定义一个processors数组，把组件插入进去，不然不会启用。
然后就到src下面创建个文件夹试一试，我刚刚在gulpfile里面引入了autoprefixer组件，我也写好了watch一直监控文件了，不出意外运行gulp watch之后。

.flex {
	display: flex;
}
复制代码

会在dest目录下生成的文件中出现

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
复制代码

还记得我们刚刚还添加了precss的插件吗？
再试试这行代码~

@for $i from 1 to 3 {
	.class-$i {
		position: absolute;
		top: 100px*$i;
	} 
}
复制代码

有没有一种感觉在创建自己的预处理器的feel？
到这里你就可以开始组建你自己的Postcss了~
当上面这个例子跑起来之后，你应该就理解Postcss到底是什么东西了，浅显的来说就是一个工具，但是里面的插件可以方便你玩出很多新的花样。
这就是初窥第一篇~接下来的我还在研究中~会从它的插件开始继续研究~看看对于项目中有那些可以用得到或者学习借鉴的地方。

我的个人博客：http://zengjinchao.com/wordpress/

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