這是在講 Gulp 不是飲料是任務自動化工具這件事：壓縮及優化 CSS 篇

發表於 | 更新於 | 分類於

前言

其實壓縮及優化 CSS 的功能在 安裝 PostCSS 篇 就已經加入了，所以這邊要介紹的是如何加入判斷 dev 與 prod 模式

gulp-cssnano

如果還沒安裝也會建議記得先安裝 gulp-cssnano

1
npm install --save gulp-cssnano

首先一樣要科普認識一下 cssnano，簡單來講 cssnano 包含了近 30 多種插件的整合包，只需要一個指令就可以幫助我們通通做到，更詳細可以看這篇

使用方法很簡單，但是因為要做調整判斷 dev 與 prod 模式，所以要在安裝兩個套件叫 gulp-if 與 minimist

1
npm install --save gulp-if minimist

首先 minimist 這個套件可以依照我們傳入的參數做變化，進而搭配 gulp-if 來切換開發模式，但是這邊要先寫一些東西

1
2
3
4
5
6
7
8
9
10
11
12
const minimist = require('minimist');

let envOptions = {
  string: 'env',
  default: {
    env: 'develop'
  }
};

let options = minimist(process.argv.slice(2), envOptions);
//現在開發狀態
console.log(options);

接下來要調整一下 SCSS 部分

1
2
3
4
5
6
7
8
9
10
11
12
gulp.task('scss', () => {
  const plugins = [
    autoprefixer(),
  ];
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss(plugins))
    .pipe(gulpif(options.env === 'prod',cssnano()))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./public/css'));
});

接下來只需要輸入 gulp scss --env dev 就可以看到 CSS 沒有被做壓縮處理了

dev

那 gulp scss --env prod 呢?CSS 就會被壓縮

prod

0%