教你一招解決瀏覽器兼容問題（PostCSS的使用）

咱們在處理網頁的時候，每每會遇到兼容性的問題。在這個問題上分爲兩個大的方向：屏幕自適應&瀏覽器兼容。而屏幕自使用的方法有許多，包括框架之類的，可是瀏覽器的兼容卻沒有一個號的框架。在咱們平常處理中，會使用屬性兼容（*background,_background...）,前綴兼容（-webkot-,-oz-,-o-...）以及註釋兼容（[if it ie...]）。方法啊不少，可是咱們卻要挨個去加這些屬性，不免會拖慢咱們的效率。這樣的狀況下，PostCSS應運而生。那開始咱們的學習之旅吧：

 

一：準備工做：

要想用PostCSS，須要你的電腦上確保安裝了npm,node,gulp,

首先新建一個文件夾，我取名爲Postcss1，在文件目錄下新建一個package.json(用來保存安裝插件信息)，gulpfle.js(用來編寫命令)，dest文件(用來存放處理後的css文件)以及src文件（用來存放原始css文件），以下圖：

 

 二：gulp以及postcss相關插件的安裝的安裝

打開你的命令符小黑窗（window+R），輸入CMD，而後到你的根目錄下，以下圖：

而後咱們輸入npm install gulp --save-dev,此步驟爲gulp的安裝； 

安裝成功之後，在package.json裏面會出現這樣的安裝信息：

在根目錄下會出現node_modules的文件目錄

 

嗯，恭喜你啊，小夥子。你安裝成功了，而後咱們再安裝postcss以及相關的插件，

繼續在命令行裏輸入：npm install postcss autoprefixer cssnext precss --save-dev

安裝成功，在package.json裏面的信息會變成：

相關插件已經安裝成功；接下來進行第三步：

 

三：進行gulpfle.js的配置：

在js文件中，咱們首先建立相關的變量：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');

　咱們如今能夠設置一個任務，讓PostCSS讀取CSS原文件而且處理它：

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

　　

咱們一塊兒來看一下上面的代碼。在第一行，設置了一個任務名叫css。這個任務將會執行一個函數，同時在這個函數中建立了一個名爲processors的數組。將上面建立的變量添加到數組當中，這裏將插入咱們想使用的PostCSS插件。

在processors數組後面，咱們指定了須要處理的目標文件，即src目錄中的任何CSS文件。

這裏面使用了兩個.pipe()函數，設置postcss()執行PostCSS，而且給postcss()傳遞processors參數，後面會告訴PostCSS要使用哪一個插件。

接下來的第二個.pipe()函數，指定結過PostCSS處理後的CSS放置在dest文件夾中。

 

而後咱們須要一個檢測的函數，當原始文件改變時，處理文件也跟着發生相關的改變，代碼以下：

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

　　

四：運行：

咱們只須要在命令行裏輸入gulp css便可運行：

src文件下的css：

執行命令行dest下面的css: