【gulp】gulp初識之postcss

從android過來的前端菜鳥，在瀏覽器兼容問題上算是吃了不少虧。在知乎上看到一篇文章（鏈接）。發現了之前沒用過的東西postcss，文章大致說可以自動生成瀏覽器前綴。於是想試試。百度了半天，幾乎都是關於這東西的原理說明，其中夾雜着零碎的使用方式。心想着東西那麼好用，應該不至於資料那麼少吧。但是無果，半天找到一篇稍微管用的：文章鏈接，於是開始下手。

剛開始如圖所示，發現npm命名，沒聽過於是找度娘。出現官網了：npm官網，這下好了再也不是無頭蒼蠅到處亂撞了。按照官網的步驟弄好了。繼續往下。

好傢伙，又出現一個gulp，一看有沒聽過，這時候只有找度娘了。有一個官網出現了gulpjs又一路安裝然後發現可以用了。之後的步驟就參考上面的文章，然後成功了。

話不多說，上總結，教你使用postcss。

1.安裝npm，官網下載Node.js下載安裝。

1.1 node -v檢查node.js版本

npm -v檢查npm版本

1.2 npm install npm@latest -g檢查更新node.js的npm版本（建議更新，安裝gulp過程中可能會出現版本太低而不能安裝的情況）

2.建議安裝cnpm（和npm用法相同，但npm國外的受網速限制）

npm install cnpm -g --registry=https://registry.npm.taobao.org

3.安裝gulp（既然安裝了cpnm那下面就用cnpm代替npm了）

3.1安裝全局gulp ：cnpm install gulp -g

3.2切換到項目內，在項目中安裝:cnpm install gulp --save-dev

全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能。

接下來的步驟都是在項目中進行

4.初始化package.json

cnpm init

"name": "test", //項目名稱（必須）
"version": "1.0.0", //項目版本（必須）
"description": "This is for study gulp project !", //項目描述（必須）
"homepage": "", //項目主頁
"repository": //項目資源庫
"type": "git",
"url": "https://git.oschina.net/xxxx"
"author": //項目作者信息
"name": "surging",
"email": "[email protected]"
"license": "ISC", //項目許可協議
"devDependencies": //項目依賴的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"

上面列出一些別人真是項目的填寫信息，由於我是自己測試這裏就亂填了一些，其實不填也一樣。

你也可以使用cnpm help package.json查看幫助文檔

5.安裝需要的插件我用到了（less,minify-css,nofity,plumber,autoprefixer,postcss,precss）

安裝命令 cpnm install gulp-插件名稱 --save-dev

less:是寫css的一種方式，我想不用多說了吧。

minify-css：兼容IE7一下需要

nofity,plumber一起使用提示錯誤信息

autoprefixer：加瀏覽器前綴

postcss,precss就是我這次要研究的（大蝦可以幫我解釋一下）

autoprefixer這個地方有個坑,安裝的時候要是手快寫成npm install gulp autoprefixer，那就恭喜你執行方法的時候會遇到is not a PostCSS plugin的問題，npm install autoprefixer纔是正確的打開方式。press安裝時候也是一樣。

6.在根目錄創建gulpfile.js，在js中寫代碼，使用插件。這裏直接上代碼了。