postcss的安装与使用

我是经过公司另外一个同事推荐的这个

他是一个资深的大哥哥  我觉得我确实需要跟多的学习和成长 而且我觉得我应该听他的话 多学学新知识

最近一直在做适配的网站 会出现很多媒体查询 我发现用这个写媒体查询 会很方面开发 能很大的提升开发速度

于是我今天特意来公司 （在家里没有学习的心思 就只想吃东西 但是我今天在公司还是吃了很多零食 ）

我费了九牛二虎之力还是没有弄好  于是乎我开始弄less 发现很好弄 但是我还是不想死心

就在我心灰意冷的时候发现了一篇文章 虽然我也好复制 但是还是要把原作地址写出来 

https://segmentfault.com/a/1190000006735589#articleHeader0

下面我开始ctrl + c and ctrl + v 了   因为他写的有一写很死的东西  我想粘出来 后续做修改

初始化目录

cd ~/workspace/postcss #进入你自己的工具目录 mkdir postcss cd postcss mkidr css npm init #初始化package.json，一路回车即可

编写测试的css文件

进入到css目录，新建一个index.css文件，键入如下内容：

button { border-radius: 4px; transition: all 0.8s; color: $red; width: 100px; }

安装相关npm包

npm install gulp gulp-postcss --save #安装需要的包，这里使用gulp来构建、打包

编写gulpfile.js

postcss文件夹根目录新建一个gulpfile.js文件，键入如下内容：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task('css', function() { //postcss处理器列表，暂时为空 var processors = []; return gulp.src('./css/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./build/')); });

执行gulp css，测试一下打包是否正常！

查看生成的build/index.css文件，和原始文件一样。
因为目前processors数组还没有加入任何插件！

增加autoprefixer插件

修改gulpfile.js，完成后如下：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task('css', function() { var processors = [ autoprefixer ]; return gulp.src('./css/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./build/')); }); function autoprefixer(css) { css.walkDecls(function(decl) { if (decl.prop === 'border-radius' || decl.prop === 'transition') { decl.cloneBefore({prop: '-moz-' + decl.prop}); decl.cloneBefore({prop: '-o-' + decl.prop}); decl.cloneBefore({prop: '-webkit-' + decl.prop}); } return decl; }); }

重新执行gulp css打包，完成后查看`build/index.css'，如下：

button { -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; color: $red; width: 100px; }

增加resolveVar插件

修改gulpfile.js，完成后如下：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task('css', function() { var processors = [ autoprefixer, resoleVar ]; return gulp.src('./css/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./build/')); }); function autoprefixer(css) { css.walkDecls(function(decl) { if (decl.prop === 'border-radius' || decl.prop === 'transition') { decl.cloneBefore({prop: '-moz-' + decl.prop}); decl.cloneBefore({prop: '-o-' + decl.prop}); decl.cloneBefore({prop: '-webkit-' + decl.prop}); } return decl; }); } function resoleVar(css) { css.walkDecls(function(decl) { if (decl.prop === 'color' && decl.value.indexOf('$red') > -1) { decl.value = decl.value.replace('$red', '#f00'); } return decl; }); }

重新执行gulp css打包，完成后查看`build/index.css'，如下：

button { -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; color: #f00; width: 100px; }

增加px2rem插件

修改gulpfile.js，完成后如下：

var gulp = require('gulp'); var postcss = require('gulp-postcss'); gulp.task('css', function() { var processors = [ autoprefixer, resoleVar, px2rem ]; return gulp.src('./css/*.css') .pipe(postcss(processors)) .pipe(gulp.dest('./build/')); }); function autoprefixer(css) { css.walkDecls(function(decl) { if (decl.prop === 'border-radius' || decl.prop === 'transition') { decl.cloneBefore({prop: '-moz-' + decl.prop}); decl.cloneBefore({prop: '-o-' + decl.prop}); decl.cloneBefore({prop: '-webkit-' + decl.prop}); } return decl; }); } function resoleVar(css) { css.walkDecls(function(decl) { if (decl.prop === 'color' && decl.value.indexOf('$red') > -1) { decl.value = decl.value.replace('$red', '#f00'); } return decl; }); } function px2rem(css) { css.walkDecls(function(decl) { if(/\d+px/.test(decl.value)) { decl.value = decl.value.replace(/\d+px/, function(dest) { return parseInt(dest) / 20 + 'rem'; }) } return decl; }); }

重新执行gulp css打包，完成后查看`build/index.css'，如下：

button { -moz-border-radius: 0.2rem; -o-border-radius: 0.2rem; -webkit-border-radius: 0.2rem; border-radius: 0.2rem; -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; color: #f00; width: 5rem; }

经过了上面这三个简单的processor之后，相信大家对postcss的认识会更直白一点了吧。。。

postcss插件

autoprefixer

npm install autoprefixer --save

和之前我们自己实现autoprefixer的类似，只不过这个插件做的更好更全一点。

precss

npm install precss --save

press语法和Sass极其相似，你可以毫不费力的使用它。

如何使用

和上面的一样，加入到processors即可，如下：

/** * 此处省略N行 */ var autoprefixer = require('autoprefixer'); var precss = require('precss'); /** * 此处省略N行 */ var processors = [ autoprefixer({browsers: ['last 10 version'], cascade: false, remove: false}), resoleVar, px2rem, precss ]; /** * 此处省略N行 */

为了验证插件确实生效了，修改一下css文件，如下：

button { border-radius: 4px; transition: all 0.8s; color: $red; width: 100px; box-sizing: border-box; } .menu { a { text-decoration: none; } }

执行gulp css再次重新打包，结果如下：

 

button { -webkit-border-radius: 0.2rem; border-radius: 0.2rem; -webkit-transition: all 0.8s; transition: all 0.8s; color: #f00; width: 5rem; -webkit-box-sizing: border-box; box-sizing: border-box; } .menu a { text-decoration: none; }

昂 文章到此结束了！