gulp-clean-css 壓縮 CSS

壓縮 CSS

安裝 NPM

npm install gulp-clean-css --save-dev

https://www.npmjs.com/package/gulp-clean-css

我們在 scss 壓縮工具中加入參數{outputStyle: 'compressed'}，這樣在編譯出來後的 css 檔案就會是壓縮過後的狀態

使用

var cleanCSS = require('gulp-clean-css');  //壓縮ＣＳＳ

gulp.task('cleancss', function() {
  return gulp.src('./tmp/css/**.css')             //所有要壓縮的 .css 檔案
    .pipe(cleanCSS({compatibility: 'ie8'}))       //將 css 最小化
    .pipe(gulp.dest('html/assets/css'));          //壓縮後檔案輸出位置
});

gulp-clean-css 與 gulp-rename

gulp-clean-css 與 gulp-rename 應用方法

var rename = require("gulp-rename"); //重新命名
var cleanCSS = require('gulp-clean-css');  //壓縮ＣＳＳ

gulp.task('cleanCSS', function(){
  return gulp.src('./tmp/css/**.css')   //所有要壓縮的 .css 檔案
    .pipe(cleanCSS())                   //將 css 最小化
    .pipe(rename(function(path){
      path.basename += ".min";
    }))
    .pipe(gulp.dest('html/assets/css')) //壓縮後檔案輸出位置
});

gulp-sass、gulp-clean-css 與 gulp-rename 在做合併

gulp-clean-css 、 gulp-rename 與 gulp-sass 應用方法

var Sass = require('gulp-sass'); // 載入 gulp-sass
var rename = require("gulp-rename"); //重新命名
var cleanCSS = require('gulp-clean-css');  //壓縮ＣＳＳ

gulp.task('sass', function () { // 定義 sass 的任務名稱
  return gulp.src('./styles/**/*.scss') // 指定要處理的 Scss 檔案目錄
    .pipe(Sass()) // 編譯 Scss
    .pipe(gulp.dest('html/assets/css')) // sass 編譯完成後的匯出資料夾
    .pipe(cleanCSS()) //壓縮＆重新命名
    .pipe(rename(function(path){
        path.basename += ".min";
    }))
    .pipe(gulp.dest('./html/assets/css'));
});

執行

$ gulp sass
[17:31:07] Using gulpfile ~/gulpfile.js
[10:55:31] Starting 'sass'...
[10:55:31] Finished 'sass' after 39 ms