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; }

昂 文章到此結束了！