初窺Postcss

kinchao發表於2018-01-08
CSS

最近新做的專案用的是Postcss。所以就趕緊嘛尼嘛尼哄去看到底是怎麼回事，發現網上找到的都是簡介或者介紹，讓很多想學的人就止步於門口，門都找不到怎麼進。讓我感到很無奈，但是經過一兩週的檢視，發現其實我一開始看的太簡單了，為什麼，因為大家普遍只寫簡介是有原因的，是因為這個並不是像之前的前處理器那樣，直接上手看語法和規則就可以去開發了，Postcss更多是告訴你一種理念，而且儼然有一種往外掛社群的趨勢發展，網上很多老大寫的文章就是告訴你有這個東西，然後關於外掛，甚至寫外掛就靠你個人。勒就是Postcss。可能我上面一長串你看不懂，待我往下講。莫著急。


關於Postcss

最近我在研究的時候，有朋友問我，這個到底是什麼，我一開始看了幾篇網上描述的不是很準的文章，我就脫口而出：“CSS4，下一代CSS。”這點描述勉強，很勉強算一點點對，為什麼呢？來，繼續講，我再研究了幾天後,fenghuang來問我你看的是啥，這次我的回答就是，我打了個比喻，LESS/SASS哪一類前處理器都給你提供好了成套的已經內建好的功能，直接就可以用，但是Postcss是你需要去他的社群載入你需要的功能外掛，這樣優勢就出來了，看出來哪裡優勢了嗎！社群！！！你不單單可以去載入現有的功能模組，還可以開發屬於自己的功能模組，可以自己拼裝專案需要的適合的功能模組。而且還有很多功能模組是別的前處理器沒有的，例如你可以寫css4風格的樣式，Postcss會幫你處理成現在瀏覽器可以識別的樣式。他的強大是他的功能模組可以按需載入並且有了社群的理念後，相信以後的功能會有更過可以供你使用。

官方的說話是：

PostCSS is a tool for transforming CSS with JS Plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more複製程式碼

這就難怪為什麼有些文章說他是CSS4了，可能哪個人只是用他的元件然後寫的CSS4的變數吧。

看到這裡是不是繼續能看到Postcss的潛力，有一絲絲會發展成生態的感覺。

快速搭建

簡單說一下如何快速讓你體驗它的魅力，首先我這幾天發現codepen已經支援了。所以你可以上codepen體驗。

然後講講從gulp怎麼搞。

首先建立一個專案資料夾,

通過npm先在這個目錄下建立專案然後建立gulpfile和package.json這些就不用說了把，我把我的檔案內容貼上來。

package.json
[v_act]{
"name": "postcss",
"version": "1.0.0",
"description": "testpostcss",
"main": "test",
"dependencies": {
"gulp": "^3.9.1",
"postcss": "^5.0.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"cssnext": "^1.8.4",
"gulp-postcss": "^6.0.1",
"precss": "^2.0.0"
},
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "test"
},
"keywords": [
"test"
],
"author": "deanzeng",
"license": "ISC"
}
[/v_act]

gulpfile

[v_act]var gulp = require('gulp'),
postcss = require('gulp-postcss');
autoprefixer = require('autoprefixer');
cssnext = require('cssnext');
precss = require('precss');

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

gulp.task('default',['css']);

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

然後npm install之後就裝好了，其實跟裝其他很多外掛是一樣的，只不過這裡需要提到的就是這裡要新增的是postcss外掛的外掛。


var processors = [
  	   autoprefixer,
  	   cssnext,
  	   precss
    ]
複製程式碼

安裝到本地專案require進來之後，記得要定義一個processors陣列，把元件插入進去，不然不會啟用。
然後就到src下面建立個資料夾試一試，我剛剛在gulpfile裡面引入了autoprefixer元件，我也寫好了watch一直監控檔案了，不出意外執行gulp watch之後。

.flex {
	display: flex;
}
複製程式碼

會在dest目錄下生成的檔案中出現

.flex {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
複製程式碼

還記得我們剛剛還新增了precss的外掛嗎？
再試試這行程式碼~

@for $i from 1 to 3 {
	.class-$i {
		position: absolute;
		top: 100px*$i;
	} 
}
複製程式碼

有沒有一種感覺在建立自己的前處理器的feel？
到這裡你就可以開始組建你自己的Postcss了~
當上面這個例子跑起來之後，你應該就理解Postcss到底是什麼東西了，淺顯的來說就是一個工具，但是裡面的外掛可以方便你玩出很多新的花樣。
這就是初窺第一篇~接下來的我還在研究中~會從它的外掛開始繼續研究~看看對於專案中有那些可以用得到或者學習借鑑的地方。


我的個人部落格：http://zengjinchao.com/wordpress/


相關文章