這是在講 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 來切換開發模式，但是這邊要先寫一些東西

const minimist = require('minimist');

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

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

接下來要調整一下 SCSS 部分

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

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

前言

gulp-cssnano

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

gulp-cssnano

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：將 Gulp deploy(部屬) Heroku

這是在講 Gulp 不是飲料是任務自動化工具這件事：一個段落

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 ejs 篇

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 pug/jade 篇

分享這篇文章

留言