PostCSS是一个利用JS插件来对CSS进行转换的工具,这些插件很是强大,强大到无所不能。其中,Autoprefixer就是众多PostCSS插件中最流行的一个。javascript
截至目前(2017年7月)PostCSS已经有超过200个插件,你能够插件列表查找有没有你所须要的插件。若是你想本身写个插件,听说这是一个不错的主意,并且很是简单(前提掌握node.js,不过我还没学会呢),你能够试着搞点事。css
看到这里,你可能没有发现它的强大之处,甚至我本身都没有被我翻译的这段官方文字所打动。由于没(wǒ)有(yě)对(bù)比(tài)就(huì)没(yòng)有(zhè)伤(wán)害(yì)。好了,是时候启动装逼模式了。html
维基百科,阿里巴巴,谷歌,Wordpress,Twitter等网站均有使用,大佬们都在用你有什么理由不跟上步伐。java
再来看看这张PostCSS下载数量的npm-stat统计表(数据证实一切):node
学习PostCSS以前须要了解一些事情:webpack
那么它还有一些特性,例如建立了一个插件功能极强的生态系统,具备模块化须要什么用什么(precss就是一个集成了相似SASS不少方法的包),相比其余的CSS预处理器它的优点主要体如今如下几个方面:git
其余对比SASS和LESS的区别在于他们内置了大量的方法,而也许你只须要用到几个变量而已,大材小用。而PostCSS则可制定我的需求的一套解决方案(仅安装须要的插件)。这也就是他高性能的主要缘由。几乎SASS和LESS有的功能全都有!github
总之好处太多了。这里就不一一列举了。火烧眉毛的你已经等不及安装使用了吧。web
PostCSS通常是结合自动化工具使用,若是要单独使用能够安装PostCSS CLI,这里我先对PostCSS CLI的安装使用讲解下。Windows下安装(文中操做所有基于WINDOWS环境):npm
或者npm i -g postcss-cli
npm i --save-dev postcss-cli
CLI是否建议全局安装?(这样包括其对应的插件都要全局了?若是不全局就失去了CLI的意义了?)。全局安装完成后,试着输入PostCSS,出现如下结果,说明安装OK
不过我我的习惯仅安装在项目中,因而我没有选择安装CLI,而是直接在项目中安装PostCSS,npm i --save-dev postcss
,我这里有个例子能够看看
接下来,咱们还作不了什么,咱们须要安装一些插件配合PostCSS,例如,我如今安装一个autoprefixer
npm install --save-dev autoprefixer
,并参考例子中的style01.css,我要经过PostCSS对它进行处理。这里两个方法:
cd node_modules/.bin/
进入node_modules/.bin/目录内再执行postcss ../../src/style01.css -o ../../dist/output_style01.css -u autoprefixer
"postcss:style01": "postcss ./src/style01.css -o ./dist/output_style01.css -u autoprefixer"
而后再回到根目录(postcss-study目录)下执行
npm run postcss:style01
二者效果相同,固然我倾向于后者啦。完成后一条鲜亮的绿色的让人安全感十分强列的提示语出现了√ Finished ...前面还有个sweet的勾勾,请看编译后的output_style01.css聪明的你必定能触类旁通的。作出更多惊奇的事情的~
另外咱们能够一样的采用Parser插件来编译样式文件(固然我其实是不会用sugarss的,若是你习惯用sass请安装postcss-scss),个人DEMO里面请参考style02.sss文件的编译。这里就很少说了。
还有一种预先写好配置文件,这个就稍微先进一些,也不会看起来很乱。咱们建立一个postcss.config.js文件:
module.exports = { parser: 'sugarss', plugins: [ require('autoprefixer') ] }不过这种通过我我的测试,仅适用于全局安装了PostCSS-CLI和sugarss的状况下再该配置文件目录下执行
postcss ./src/style02.sss -o ./dist/test.css
命令就行了。这里我的不是很推荐。关于CLI下的一些方法暂时就很少说了,若有错误请各位大佬指正~?
官方对于插件根据用途作了分类,主要有如下几个类别:
解决全局CSS问题
使用将来的CSS语法
编写可读性更好的CSS
用于图片和字体
CSS语法检查
其余
以上内容主要是用来熟悉一下PostCSS的。接下来讲点实际的,如何利用PostCSS结合自动化工做在项目中使用。
关于webpack基础配置的相关内容这里就很少说了~前面已有大神写了有兴趣能够膜拜一下。
咱们先来建立一个项目目录,结构以下:(style0*.css做为我测试的文件,后面可能增长)
|– dist |– src | |– images | | |– postcss-00.png | | |– postcss-01.png | – index.js | – index.html | – style04.sss |– postcss.config.js |– webpack.config.js |– package.json
接下来安装依赖包:
npm i -D postcss-loader style-loader css-loader webpack webpack-dev-server
而后修改已下文件,请仔细阅读?
package.json
"scripts": { "start": "webpack-dev-server", "build": "webpack" },
先来个简单的试试:
webpack.config.js
var path = require('path'); module.exports = { entry: { index: path.resolve(__dirname, 'src/index.js') }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, module: { rules: [{ test: /\.sss$/, exclude: /node_modules/, use: [{ loader: 'style-loader', }, { loader: 'css-loader', options: { importLoaders: 1, } }, { loader: 'postcss-loader' } ] }] }, devServer: { contentBase: __dirname, compress: true, port: 9000, inline: true, hot: true, host: '0.0.0.0', disableHostCheck: true } }
postcss.config.js
module.exports = { parser: 'sugarss', plugins: [ require('precss'), require('autoprefixer') ] }
读完了应该发现此刻运行确定会出错的~由于尚未安装其余跟PostCSS相关的插件呢,因而继续安装:
npm i -D sugarss precss autoprefixer
(插件简单介绍,sugarss是比较特别的css语法,我还没有了解到这样写的好处,仅供你们学习参考。precss功能就很强悍了,相似sass的一些功能。autoprefixer就不用多说啦!)
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是一个用于PostCSS测试的页面</title> </head> <body> <div class="test"> <p class="multiline">this is a container</p> </div> <script src="../dist/index.js"></script> </body> </html>
style04.sss
$blue: #056ef0 .test box-sizing: border-box padding: 50px border: 10px solid $blue width: 200px height: 200px .multiline, .selector box-shadow: 1px 0 9px rgba(0, 0, 0, .4), 1px 0 3px rgba(0, 0, 0, .6)
基本工做大功告成,开两个终端跑两条命令试试看。
npm run start
npm run build
一切运行OK,接下来访问http://localhost:9000/src/,看起来也都还不错。固然写到这里只是介绍了如何结合webpack使用PostCSS。而实际项目应用中,我目前还在探索更多实用的插件,构建一个基本能够替代SASS,LESS等
参考文献:
Gulp我用的不多,不是很熟悉,这里结合官方一些和本身尝试的DEMO进行说明。
我基于以前的代码来继续补充内容。
安装Gulp相关的包:
npm run i -D gulp gulp-postcss gulp-sourcemaps
增长Gulp配置文件gulpfile.js,页面index2.html,样式style05.css,修改package.json的script以下:
var postcss = require('gulp-postcss'); var gulp = require('gulp'); gulp.task('css', function () { var postcss = require('gulp-postcss'); var sourcemaps = require('gulp-sourcemaps'); return gulp.src('src/style05.css') .pipe(sourcemaps.init()) .pipe(postcss([require('precss'), require('autoprefixer')])) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/')); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是一个用于PostCSS测试的页面(gulp)</title> <link href="../dist/style05.css" rel="stylesheet"> </head> <body> <div class="test"> <p class="box">this is a box</p> <p class="box">this is another box</p> </div> </body> </html>
/* gulp下测试 */ $blue: #056ef0; .test { display: flex; color: $blue; .box { flex: 1; } }
package.json的scripts部分以下
"scripts": { "start": "webpack-dev-server", "build": "webpack", "gulp": "gulp css" },
一切就绪后,咱们来执行伟大的命令了:
npm run gulp
个人电脑等待了约1.26s~1.29s,提示finish啦~
和以前相同,我这里依旧采用了webpack-dev-server启动的服务器(固然这个又依赖webpack配置,除非你将配置直接写入package.json内),那么你固然也可使用其余本身喜欢的服务器(例如http-server),咱们依旧先启动服务器npm run start,而后访问本地http://localhost:9000/src/index2.html就能够看到效果了。或者你也能够直接去看dist目录内生成出来的style05.css文件,一切都是那么美好~
由于此次学习,纯粹是根据“教科书”来学,来说解的,所以也就没有什么真正的精髓,我也是才开始接触PostCSS,文中有错误之处还请指正。我但愿之后在项目中尽量的用好PostCSS,再次带来一篇简短而有力的文章分享给你们。因时间和精力有限但愿这篇文章能给你们带来些帮助。目前能想到的,还有一些将来须要补充的内容包括:
暂时想到这些,若是你还有一些想到的欢迎在下面留言哦?
其余参考文献汇总:PostCSS Deep Dive(强烈推荐!我看完了才发现有部分译文:PostCSS深刻学习)
PostCSS深刻学习: PostCSS和Sass、Stylus或LESS一块儿使用
PostCSS – A Comprehensive Introduction
http://www.cnblogs.com/terrylin/p/5229169.html
至关不错的PPT形式
https://ai.github.io/about-postcss/en/
postcss的优点
关于我我的的PostCSS一系列学习, 介绍及总结, 有兴趣能够参阅: