gulp是一種自動化構建工具，它可以通過預先定義的任務簡化前端開發的流程。目前，壓縮CSS是許多開發人員必須執行的任務之一。通過gulp，壓縮CSS也可以自動化。

壓縮CSS可以顯著減少文件大小，從而提高頁面加載速度和用戶體驗。在gulp中，我們可以使用gulp-sass插件和gulp-clean-css插件來壓縮CSS。

// 引用gulp插件
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
// 定義任務
gulp.task('sass', function () {
return gulp.src('./src/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./src/css'));
});
gulp.task('minify-css', ['sass'], function () {
return gulp.src('./src/css/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('./dist/css'));
});
// 定義默認任務
gulp.task('default', ['sass', 'minify-css']);

在上面的gulpfile.js文件中，我們首先聲明了需要使用的gulp插件：gulp，gulp-sass和gulp-clean-css。接著，我們定義了兩個任務：sass和minify-css。

sass任務將所有.scss文件編譯為.css文件，并將它們保存在./src/css文件夾中。這個任務是為了把.scss文件轉換成.css文件，以便我們可以對其進行壓縮。

minify-css任務將sass任務中的生成的css文件壓縮，并將它們保存在./dist/css文件夾中。我們使用了gulp-clean-css插件來壓縮CSS，其參數允許我們指定兼容性的版本。在這個任務的依賴列表中我們也將sass任務列出，以便壓縮任務能夠在編譯完成后以其為基礎進行。

最后，我們定義了一個默認任務，它依賴于sass和minify-css任務。當我們運行gulp命令時，它將首先執行sass任務，然后再執行minify-css任務。