這是在講 Gulp 不是飲料是任務自動化工具這件事：安裝 PostCSS 篇

前言

好的，又來到一個新的章節，這章節要來安裝 PostCSS，搭配前面的 SCSS，一起實作。

PostCSS

入坑之前要先科普一下 PostCSS 是什麼鬼東西，早期我們在撰寫 CSS 都必須去查 Can i Use，確保我們所使用的 CSS 在瀏覽器上是可以如我們預期的方式呈現，如果不行我們可能就要加入前綴詞 (-ms-、-moz-、-webkit-)

那 PostCSS 就是幫助我們針對 CSS 加入前綴詞，讓你解放自己還要去查，當然我們也可以依照需求去調整 PostCSS 哪幾個瀏覽器版本要加入前綴詞

但是 PostCSS 的前綴詞主要是搭配這個套件 autoprefixer 而產生的，你可能會很疑惑這樣子 PostCSS 能夠做什麼?簡單來講 PostCSS 就是幫助我們做 CSS 優化並透過 autoprefixer 套件幫助我們加入前綴詞唷!

安裝 gulp-postcss + autoprefixer

當然第一步驟絕對是先安裝套件

1

npm install --save gulp-postcss autoprefixer

撰寫流程

接下來就是引入 gulp-postcss、autoprefixer

1
2

const autoprefixer = require('autoprefixer');
const postcss = require('gulp-postcss');

接下來我們要針對 SCSS 的部分做調整，那 SCSS 其實在 .pipe(sass().on('error', sass.logError)) 的時候就已經編譯完成了

所以我們的 gulp-postcss、autoprefixer 就要寫在這之後

接下來依照官方的文件說明

我們要新增一個陣列變數，然後再編譯完之後這樣寫

1
2
3
4
5
6
7
8
9
10
11
12

gulp.task('scss', () => {
  const plugins = [
    autoprefixer(),
    cssnano()
  ];
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./public/css'));
});

這時候執行 gulp scss 你可能會出現錯誤

所以你還要在安裝一個套件

1

npm install --save gulp-cssnano

安裝完畢後一樣記得引入

1

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

接下來在輸入一次 gulp scss 就不會出現 cssnano is not defined，但是一樣無法正常運作，此時會出現像這樣的錯誤

解決方式很簡單，只需要將 autoprefixer({ browsers: ['last 1 version'] }) 中的 { browsers: ['last 1 version'] } 移除即可

Browserslist

當然我建議還是要處理這個錯誤

1
2
3
4
5
6
7
8
9
10
11

Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option cause some error. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

因為這個錯誤是我們調整 CSS 支援性的版本重點，但是這個問題並不難解決

只需要建立一個檔案叫 .browserslistrc，然後內容塞入

1
2
3
4
5

# Browsers that we support

last 5 version
> 1%
IE 10 # sorry

這樣子即可

之後如果要調整 CSS 支援版本就只需要調整 .browserslistrc 中的 last X version X 即可

關於 browserslistrc 更詳細可以看這篇

另一種前綴詞套件

如果不想要安裝 gulp-postcss、autoprefixer，也可以改用別人整合好的套件

1

npm install --save gulp-autoprefixer

用法也是非常簡單，只需要引入 gulp-autoprefixer，並這樣撰寫即可

(但我個人還是喜歡 gulp-postcss、autoprefixer)