[Gulp] 安裝 PostCSS 的地雷

最近在學怎麼使用 Gulp 來管理專案，於是按照 Ray 的教學文慢慢跟著寫 gulpfile，不過在安裝 PostCSS 時有踩到一個文章中沒提到的地雷，解決的過程一波二折，於是讓我決定紀錄一下拆地雷的經過。

問題描述

在 Ray 的教學文：這是在講 Gulp 不是飲料是任務自動化工具這件事：安裝 PostCSS 篇中，有提到要安裝 gulp-cssnano，並且將它引入 gulpfile 中。

我照做之後，執行 gulp scss，此時出現一個錯誤訊息：

Error in plugin “gulp-postcss”
Message: [object Object] is not a PostCSS plugin

嘗試解決

由於在 Ray 的教學文章中沒有提到會發生這個錯誤，所以我就自行估狗了一些 StackOverflow 的文章，試了好幾篇解答後，終於找到了一個能成功解決問題的回答！

就是這一篇：gulpfile autoprefixer must change to postcss

我研究了回答者提供的程式碼，發現他引入 gulp-cssnano 的方式有點不一樣。Ray 的文章以及 gulp-cssnano 本身的文件都說要這樣引入：

var cssnano = require('gulp-cssnano');

但是不知道為何，在 require() 內寫 gulp-cssnano 似乎找不到檔案。而如果是改成在括號內寫 cssnano，重新運行 gulp scss，錯誤訊息就消失了！

var cssnano = require('cssnano');

壓縮 CSS 時又報錯

改了 require 之後，我接著處理 CSS 的壓縮以及判斷開發環境與正視環境，結果在輸入 gulp scss --env prod 時又跳出錯誤：

TypeError: dest.on is not a function

這一次我只好找上原作者 Ray，麻煩他幫我看看是怎麼回事。原來，require 內一定要寫 gulp-cssnano，因為原始 cssnano 並沒有 gulp 相關功能。如果 require 裡面寫 gulp-cssnano 卻沒有正確載入檔案，可以重新安裝一次 gulp-cssnano，可能是安裝時沒裝好。

於是我重新安裝 gulp-cssnano 並且又改回原本寫的 require：

var cssnano = require('gulp-cssnano');

之後就順利運行了～

Special Thanks

感謝 Ray 撥空看我的原始碼，協助我抓蟲成功 🐛