現代化 Web 開發技術學習分享

0%

Gulp 前端自動化 - PostCSS 與 Autoprefixer

前言

PostCSS 是一套使用 JavaScript 轉換 CSS 的工具,有別於以往 Sass、Less 等預處理器將檔案編譯成 CSS,PostCSS 是針對 CSS 後續所作行為處理的後處理器,在某些情境也有可能為前處理器,透過載入並使用 Plugin 的方式來完成目的,常見的使用情境為 CSS Prefix、CSS Conpress 等等。此篇將結合 gulp-postcss 與 gulp-sass 來說明,途中也會補充常見的 PostCSS Plugin,像是 autoprefixer 和 cssnano。

筆記重點

  • gulp-postcss 安裝
  • gulp-postcss 基本使用
  • gulp-postcss 可傳遞選項
  • 補充:Autoprefixer 與 Browserslist
  • 補充:使用 cssnano 優化代碼

gulp-postcss 安裝

套件連結:gulp-postcssautoprefixer

gulp-postcss:

1
$ npm install gulp-postcss

autoprefixer:

1
$ npm install autoprefixer

autoprefixer 為 PostCSS 最為著名的 CSS Prefix 插件,前面會先以它當作第一個範例,請務必安裝。

gulp-postcss 基本使用

此次範例會搭配 gulp-sass 一起使用,相關文章連結:gulp-sass

初始專案結構:

1
2
3
4
5
6
7
8
9
10
11
12
gulp-demo/

├─── node_modules/
├─── source/
│ │
│ └─── scss/
│ │
│ └─── all.scss # SCSS 主檔案

├─── gulpfile.js # Gulp 配置檔案
├─── package-lock.json
└─── package.json # 安裝 gulp、gulp-sass、gulp-postcss、autoprefixer

撰寫 SCSS 範例:

1
2
3
4
5
6
7
8
9
10
11
12
$color-primary: blue;

.d-flex {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}

.text-primary {
color: $color-primary;
}

載入並使用 gulp-postcss:

1
2
3
4
5
6
7
8
9
10
11
12
const gulp = require('gulp');
const sass = require('gulp-sass'); // 載入 gulp-sass 套件
const postcss = require('gulp-postcss'); // 載入 gulp-postcss 套件
const autoprefixer = require('autoprefixer'); // 載入 autoprefixer 套件

gulp.task('sass', () => {
return gulp
.src('./source/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer()])) // 將編譯完成的 CSS 做 PostCSS 處理
.pipe(gulp.dest('./public/css'));
});

執行指定任務:

1
$ gulp sass

生成 ./public/css/all.css 檔案,此時專案結構如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gulp-demo/

├─── node_modules/
├─── public/
│ │
│ └─── css/
│ │
│ └─── all.css # 編譯完成的 CSS 檔案

├─── source/
│ │
│ └─── scss/
│ │
│ └─── all.scss # SCSS 主檔案

// 以下省略

以下為經過 autoprefixer 處理後的 CSS 檔案內容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.d-flex {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
}

.text-primary {
color: blue;
}

你會發現 autoprefixer 替我們增加了相關的 CSS Prefix,以往這些語法都需要手動增加,造成許多的不方便,使用此插件即可自動幫我們完成此操作,我認為 PostCSS 更像是一個平台,利用豐富的插件進行前或後處理,有沒有發現我說的是前或後處理?事實上,某些 PostCSS 插件是以預處理的方式進行,比如說:postcss-each,所以我們並不能直接把 PostCSS 定義為後處理器,得看使用的性質而定。

gulp-postcss 可傳遞選項

可參考 postcss.config.js 可傳遞參數列表,以下為常用的參數配置:

  • plugins:Array | Function
    需要使用的插件,默認為 none

  • parser:Function
    採用的解析器,默認為 default

範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const sugarss = require('sugarss');

gulp.task('sass', () => {
return gulp
.src('./source/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer()], { parser: sugarss })) // 更改預設解析器
.pipe(gulp.dest('./public/css'));
});

補充:Autoprefixer 與 Browserslist

Browserslist 是一款用於不同前端工具之間共享目標瀏覽器和 Node.js 版本的工具,在之前如果要配置 Babel、ESLint、Autoprefixer 等相關工具,需要再各自的配置文件依序設定,造成許多的麻煩,Browserslist 就是為了解決這一個麻煩而建構,只需配置 .browserslistrc 文件,上面所提到的工具即可共享專案配置,這次我們就來介紹如何使用 Browserslist 配置 Autoprefixer 吧!

Browserslist 為 Autoprefixer 的相依套件,可自行檢查是否已完成安裝,如需下載,可使用以下指令:

1
$ npm install browserslist

Browserslist 可以在 package.json 中設定,也可以用單獨檔案 .browserslistrc 設定。

參考 Full List 進行配置:

使用 package.json 配置:

1
2
3
{
"browserslist": ["last 2 version", "> 1%", "IE 10"]
}

新增並使用 .browserslistrc 單獨檔案配置:

1
2
3
 gulp-demo/

+└─── .browserslistrc
1
2
3
last 2 version
> 1%
IE 10

執行 gulp scss 指令進行編譯,結果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.d-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}

.text-primary {
color: blue;
}

觀察編譯後檔案可以發現 Autoprefixer 針對了我們的 .browserslistrc 配置進行編譯,大功告成!

補充:使用 cssnano 優化代碼

cssnano 是基於 PostCSS 所建構的插件,集合多個優化、壓縮代碼等應用插件,使用方式也非常簡單,讓我們先從安裝開始說起:

套件連結:cssnano

1
$ npm install cssnano

載入並使用 cssnano:

1
2
3
4
5
6
7
8
9
10
11
12
13
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano'); // 載入 cssnano 套件

gulp.task('sass', () => {
return gulp
.src('./source/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer(), cssnano()])) // 陣列方式啟用插件
.pipe(gulp.dest('./public/css'));
});

執行 gulp sass 指令即可進行編譯及壓縮代碼應用,基本上大部分情境都只需要使用 cssnano 默認配置,如果有特殊場景需要單獨配置,可參考官方的說明:

預設轉換 vs 高級轉換:optimisations

以下示範高級轉換配置:

安裝高級轉換組件:

1
$ npm install cssnano-preset-advanced

更改 cssnano 的 preset 選項:

1
2
3
4
5
6
7
8
9
10
11
12
13
const gulp = require('gulp');
const sass = require('gulp-sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

gulp.task('sass', () => {
return gulp
.src('./source/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer(), cssnano({ preset: 'advanced' })])) // 更改 cssnano 預設 preset
.pipe(gulp.dest('./public/css'));
});

編譯即可看到結果。