PostCSS現(xiàn)在已經(jīng)普及了一段時(shí)間，如果您還沒(méi)有使用過(guò)它或不知道PostCSS是什么，那么我建議您看看這篇PostCSS簡(jiǎn)介，該文章介紹了PostCSS的基礎(chǔ)知識(shí)，包括如何安裝和使用一些PostCSS插件。
　　
　　在本教程中，我將向您展示如何結(jié)合Gulp使用PostCSS，一個(gè)流行的自動(dòng)化工具。由于這篇文章不是一個(gè)關(guān)于Gulp的入門(mén)教程，所以我不會(huì)涵蓋Gulp的基礎(chǔ)知識(shí)。但為了快速入門(mén)，您可以看看這篇Gulp.js簡(jiǎn)介。
　　1.項(xiàng)目設(shè)置
　　在開(kāi)始本教程之前，你應(yīng)該創(chuàng)建一個(gè)項(xiàng)目文件夾用來(lái)工作。該文件夾內(nèi)應(yīng)該已經(jīng)安裝了Gulp以及兩個(gè)內(nèi)部文件夾，名稱(chēng)分別為“initial”和“final”（或您選擇的其它名稱(chēng)）。所謂的“initial”的文件夾將存放你的原材料和未加工的CSS代碼。 “initial”文件夾將存放處理過(guò)的文件，隨時(shí)可以使用。
　　在繼續(xù)之前，在您的項(xiàng)目文件夾中打開(kāi)使用終端，運(yùn)行以下命令：
　　npm install gulp-postcss --save-dev
　　PS：–save-dev補(bǔ)充：表示將正在安裝的插件作為依賴(lài)添加到project.json文件里。這將對(duì)多人合作模式有很大的幫助。當(dāng)其他開(kāi)發(fā)人員運(yùn)行npm install在軟件包安裝命令，所有的插件將被自動(dòng)安裝。
　　此時(shí)你的文件夾結(jié)構(gòu)應(yīng)該是：
　　initial —您的原始CSS文件的文件夾。
　　style.css —未處理的css樣式，我們將在稍后進(jìn)行編輯。
　　final — 處理過(guò)的css文件的文件夾node_modules — 所有NPM模塊的文件夾
　　gulp — 當(dāng)你安裝Gulp時(shí)創(chuàng)建的文件夾gulp-postcss —運(yùn)行上面的命令后創(chuàng)建的文件夾。
　　guplfile.js —你的 Gulp文件package.json —你的 package.json 文件
　　2.安裝插件
　　開(kāi)始之前，我們先安裝一些基本的插件。我們將要使用的插件是 short-color（一個(gè)顏色插件）。這個(gè)插件基本上擴(kuò)展了現(xiàn)有的顏色屬性，并且可以設(shè)置第二個(gè)顏色值（將會(huì)被作為背景顏色）。運(yùn)行以下命令來(lái)安裝 short-color。
　　npm install postcss-short-color --save-dev
　　你還可以同時(shí)安裝使用gulp-postcss和postcss-short-color ：
　　npm install gulp-postcss postcss-short-color --save-dev
　　這兩個(gè)插件安裝完畢后，你需要打開(kāi)并編輯gulpfile.js文件，這樣就可以開(kāi)始使用該插件工作。我們首先通過(guò)以下代碼來(lái)啟用這兩個(gè)插件：
　　vargulp = require（‘gulp’）; varpostcss = require（‘gulp-postcss’）; varshortColor = require（‘postcss-short-color’）;
　　現(xiàn)在，讓我們建立一個(gè)gulp任務(wù)來(lái)處理我們的原始的CSS文件，并創(chuàng)建一個(gè)準(zhǔn)備就緒的樣式表。下面是代碼這樣做：
　　gulp.task（‘css’， function（）{returngulp.src（‘initial/*.css’） .pipe（postcss（［shortColor］）） .pipe（gulp.dest（‘final’））; }）;
　　我首先創(chuàng)建一個(gè)名為CSS的任務(wù)。當(dāng)你要運(yùn)行相應(yīng)的功能時(shí)可以用到這個(gè)名字。您可以在gulp.src（）內(nèi)部指定要處理的文件。使用*的CSS將處理“intial”文件夾內(nèi)所有的CSS文件。
　　接下來(lái)，我們使用pipe（）函數(shù)來(lái)調(diào)用我們的所有插件。要做到這一點(diǎn)，我們需要將所有的插件作為參數(shù)傳遞給postcss（）函數(shù)。在我們的基本的例子中，我們實(shí)際上只有一個(gè)插件需要傳遞。 在下一節(jié)，我會(huì)告訴你如何傳遞多個(gè)插件。插件通過(guò)管道后，gulp.dest（）將被用于設(shè)置處理的文件的目的地。
　　為了測(cè)試，如果一切已正確設(shè)置，在“initial”文件夾內(nèi)創(chuàng)建一個(gè)style.css文件。 style.css文件將有以下的CSS：
　　section{ color:white black; }
　　接下來(lái)，你需要在你的終端里運(yùn)行g(shù)ulp css命令。此刻，在您的“final”文件夾內(nèi)，你應(yīng)該會(huì)看到一個(gè)style.css文件，像下面的CSS 一樣：
　　section{ color:white; background-color:black; }
　　如果您CSS的樣式和上面所展示的CSS樣式一樣的話(huà)，我們就可以認(rèn)為一切工作正常。
　　3.安裝多個(gè)插件
　　只使用一個(gè)基本的插件并不能從根本上減輕你的工作量。PostCSS有很多令人印象深刻的且令人難以置信的有用的插件，所以在大多數(shù)情況下，你需要使用到的插件不止一個(gè)。在本節(jié)中，我將告訴你如何在工作中同時(shí)使用多個(gè)插件。
　　您可能會(huì)發(fā)現(xiàn)有三個(gè)PostCSS插件（包）是非常有用的：即 short， cssnext和 autoprefixer
　　short將使你少寫(xiě)并且速記大量的CSS屬性。 例如：
　　.heading{ font-size:1.25em 2; }
　　將會(huì)被解析成：
　　.heading{ font-size:1.25em; line-height:2; }
　　cssnext能夠在你的css樣式表中，使用最新的CSS語(yǔ)法。例如，下面的CSS：
　　.link{ color:color（green alpha（-10%））; }
　　將被轉(zhuǎn)換為：
　　.link{ background:rgba（0， 255， 0， 0.9）; }
　　最后，autoprefixer將會(huì)在您的CSS和轉(zhuǎn)換后的樣式文件中添加供應(yīng)商前綴：
　　img{ filter:grayscale（0.9）; }
　　轉(zhuǎn)換為：
　　img{ -webkit-filter:grayscale（0.9）; filter:grayscale（0.9）; }
　　現(xiàn)在讓我們看看如何安裝這些插件，然后用它們來(lái)改造我們的樣式表。在項(xiàng)目目錄下運(yùn)行下面的命令：
　　npm install autoprefixer postcss-short postcss-cssnext --save-dev
　　我們需要修改我們的gulp task來(lái)包含所有這些插件，代替用管道將所有這些插件一個(gè)一個(gè)的傳遞，我們將它們存儲(chǔ)在易于維護(hù)和簡(jiǎn)潔的陣列。下面是我們的gulpfile.js的代碼：
　　vargulp = require（‘gulp’）; varpostcss = require（‘gulp-postcss’）; varautoprefixer = require（‘a(chǎn)utoprefixer’）; varcssnext = require（‘postcss-cssnext’）; varshortcss = require（‘postcss-short’）; gulp.task（‘css’， function（）{varplugins = ［ shortcss， cssnext， autoprefixer（{browsers： ［‘》 1%’］， cascade： false}） ］; returngulp.src（‘initial/*.css’） .pipe（postcss（plugins）） .pipe（gulp.dest（‘final’））; }）;
　　您可能已經(jīng)注意到了，我已經(jīng)指定了Autoprefixer插件的一些選項(xiàng)。Autoprefixer輸出這些選項(xiàng)確定的CSS，在這種情況下，我說(shuō)的是插件支持所有全球使用量超過(guò)1％的瀏覽器。我也被禁用級(jí)聯(lián)，讓所有的前綴和不帶前綴屬性左對(duì)齊。類(lèi)似的選項(xiàng)也可用于大多數(shù)其他插件。
　　為了測(cè)試，如果一切正常，將出在樣式表下面的CSS：
　　.prefix-filter{ display:flex; }.cssshort-section{ text：#333bold justify uppercase 1.25em 1.7.05em; }.cssnext-link{ color:color（blue alpha（-10%））; }.cssnext-link:hover{ color:color（orange blackness（80%））; }
　　如果現(xiàn)在在終端中運(yùn)行g(shù)ulp css，你應(yīng)該在“final”文件夾中可以得到style.css，如下：
　　.prefix-filter{ display：-webkit-box; display:flex; }.cssshort-section{ color：#333; font-weight:700; text-align:justify; text-transform:uppercase; font-size:1.25em; line-height:1.7; letter-spacing：.05em; }.cssnext-link{ color：#0000ff; color:rgba（0， 0， 255， 0.9）; }.cssnext-link:hover{ color:rgb（51， 33， 0）; }
　?。?。插件的執(zhí)行順序
　　在最后一節(jié)的例子很清楚說(shuō)明了PostCSS的實(shí)用性。所有PostCSS的力量在于它的插件。
　　我們具體來(lái)研究?jī)蓚€(gè)插件 rgba-fallback 和 color-function， rgba-fallback插件會(huì)轉(zhuǎn)換一個(gè)RGBA顏色為16進(jìn)制格式，color-function將改變CSS的color（）函數(shù)來(lái)兼容更多菜單CSS，比方說(shuō)，你有一下的CSS：
　　body{ background:color（orange a（90%））; }
　　如果你運(yùn)行的顏色功能插件之前的RGBA-后備插件，就像這樣：
　　var plugins =［ rgbafallback， colorfunction ］;
　　你將得到下面的CSS：
　　body{ background:rgba（255， 165， 0， 0.9）; }
　　正如你所看到的，在處理CSS時(shí)沒(méi)有RGBA回退。這樣的異常原因是回退插件運(yùn)行時(shí)，它發(fā)現(xiàn)背景是color（orange a（90%）），并且不知道該怎么辦。后來(lái)，color函數(shù)插件執(zhí)行，并從原來(lái)的color函數(shù)創(chuàng)建RGBA顏色值。
　　如果你扭轉(zhuǎn)插件順序，按以下順序運(yùn)行它們：
　　var plugins =［ colorfunction， rgbafallback ］;
　　最后的CSS是這樣的：
　　body{ background：#ffa500; background:rgba（255， 165， 0， 0.9）}
　　這一次的顏色插件首先把背景色的RGBA值和后備插件層增加一個(gè)十六進(jìn)制回退。
　　總結(jié)
　　在本教程中我已經(jīng)介紹了使用gulp和PostCSS一起使用的基本知識(shí)。隨著插件和gulp的正確組合，可以節(jié)省開(kāi)發(fā)的許多時(shí)間和避免不必要的麻煩。如果您有任何技術(shù)問(wèn)題或建議，請(qǐng)盡管在本教程的下面進(jìn)行評(píng)論，以便于我們能更好的學(xué)習(xí)交流。
?