Gulp 使用gulp壓縮CSS

咱們除了可使用 gulp 壓縮 JS 文件，還能夠壓縮 CSS，壓縮 CSS 代碼能夠下降 CSS 文件的大小，提升網頁的打開速度。

壓縮CSS文件

使用 gulp 來壓縮 CSS 文件的操做步驟和壓縮 JS 文件差很少，前面咱們學習瞭如何壓縮 JS 文件，那麼再學習壓縮 CSS 文件就會以爲很簡單啦。

壓縮 CSS 文件一樣須要用到相應的插件，關於 gulp 的 CSS 壓縮插件，一共有以下三個：

• gulp-cssnano
• gulp-minify-css
• gulp-clean-css

上面三個插件，由於 gulp-minify-css 如今已經被標記爲 deprecated，由於咱們可使用其他兩個插件。

例如咱們全部的 .css 文件壓縮到 dist 目錄下的 css 文件夾中，具體操做以下所示。

安裝插件

首先安裝 gulp-clean-css 插件，命令以下所示：

npm install gulp-clean-css

以下圖所示：

在gulpfile.js文件中編寫代碼

插件安裝成功後，咱們就能夠在 gulpfile.js 文件中編寫代碼。

示例：

// 獲取 gulp
var gulp = require('gulp')
var cleancss = require('gulp-clean-css')
gulp.task('testcss', function(cb) {
    gulp.src('css/*.css')
        .pipe(cleancss())
        .pipe(gulp.dest('dist/css'))
        cb()
})

運行 gulp testcss 命令，壓縮 CSS 文件：

此時項目根目錄下的 dist 目錄中會生成一個 CSS 文件夾，被壓縮的 CSS 文件就放在這個文件夾中。

gulp-cssnano 插件的使用與上述步驟相似，這裏就不一一演示啦，你們能夠本身安裝 gulp-cssnano 插件，還要將 gulp-clean-css 替換成 gulp-cssnano 插件，運行命令，一樣能夠成功壓縮 CSS 文件。