我們?cè)谔幚砭W(wǎng)頁(yè)的時(shí)候串结，往往會(huì)遇到兼容性的問(wèn)題吠昭。在這個(gè)問(wèn)題上分為兩個(gè)大的方向：屏幕自適應(yīng)&瀏覽器兼容客扎。而屏幕自使用的方法有許多，包括框架之類的，但是瀏覽器的兼容卻沒(méi)有一個(gè)號(hào)的框架啤覆。在我們?nèi)粘Ｌ幚碇猩蒲樱瑫?huì)使用屬性兼容（*background,_background...）,前綴兼容（-webkot-,-oz-,-o-...）以及注釋兼容（[if it ie...]）。方法啊很多城侧，但是我們卻要挨個(gè)去加這些屬性易遣，難免會(huì)拖慢我們的效率。這樣的情況下嫌佑，PostCSS應(yīng)運(yùn)而生豆茫。那開(kāi)始我們的學(xué)習(xí)之旅吧：
一：準(zhǔn)備工作：
要想用PostCSS，需要你的電腦上確保安裝了npm,node,gulp,
首先新建一個(gè)文件夾屋摇，我取名為Postcss1揩魂，在文件目錄下新建一個(gè)package.json(用來(lái)保存安裝插件信息)，gulpfle.js(用來(lái)編寫命令)炮温，dest文件(用來(lái)存放處理后的css文件)以及src文件（用來(lái)存放原始css文件）火脉，如下圖：
二：gulp以及postcss相關(guān)插件的安裝的安裝
打開(kāi)你的命令符小黑窗（window+R），輸入CMD柒啤，然后到你的根目錄下倦挂，如下圖：
然后我們輸入npm install gulp --save-dev,此步驟為gulp的安裝；
安裝成功以后担巩，在package.json里面會(huì)出現(xiàn)這樣的安裝信息：
在根目錄下會(huì)出現(xiàn)node_modules的文件目錄
嗯方援，恭喜你啊，小伙子涛癌。你安裝成功了犯戏，然后我們?cè)侔惭bpostcss以及相關(guān)的插件，
繼續(xù)在命令行里輸入：npm install postcss autoprefixer cssnext precss --save-dev
安裝成功拳话，在package.json里面的信息會(huì)變成：
相關(guān)插件已經(jīng)安裝成功先匪；接下來(lái)進(jìn)行第三步：
三：進(jìn)行g(shù)ulpfle.js的配置：
在js文件中，我們首先創(chuàng)建相關(guān)的變量：
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
我們現(xiàn)在可以設(shè)置一個(gè)任務(wù)弃衍，讓PostCSS讀取CSS原文件并且處理它：
gulp.task('css', function () {
var processors = [autoprefixer, cssnext, precss];
return gulp.src('./src/*.css').pipe(postcss(processors)).pipe(gulp.dest('./dest'));
});
我們一起來(lái)看一下上面的代碼呀非。在第一行，設(shè)置了一個(gè)任務(wù)名叫css笨鸡。這個(gè)任務(wù)將會(huì)執(zhí)行一個(gè)函數(shù)姜钳，同時(shí)在這個(gè)函數(shù)中創(chuàng)建了一個(gè)名為processors的數(shù)組坦冠。將上面創(chuàng)建的變量添加到數(shù)組當(dāng)中形耗，這里將插入我們想使用的PostCSS插件。
在processors數(shù)組后面辙浑，我們指定了需要處理的目標(biāo)文件激涤，即src目錄中的任何CSS文件。
這里面使用了兩個(gè).pipe()函數(shù)，設(shè)置postcss()執(zhí)行PostCSS倦踢，并且給postcss()傳遞processors參數(shù)送滞，后面會(huì)告訴PostCSS要使用哪個(gè)插件。
接下來(lái)的第二個(gè).pipe()函數(shù)辱挥，指定結(jié)過(guò)PostCSS處理后的CSS放置在dest文件夾中犁嗅。
然后我們需要一個(gè)檢測(cè)的函數(shù)，當(dāng)原始文件改變時(shí)晤碘，處理文件也跟著發(fā)生相關(guān)的改變褂微，代碼如下：
1
2
3
4
gulp.task('watch', function () {
gulp.watch('./src/*.css', ['css']);
});
gulp.task('default', ['watch', 'css']);
四：運(yùn)行：
我們只需要在命令行里輸入gulp css即可運(yùn)行：
src文件下的css：
執(zhí)行命令行dest下面的css:
