在實(shí)際項(xiàng)目中，除了 HTML、CSS、JS 等文件，還會(huì)用到大量的圖片。壓縮圖片可降低圖片文件大小，提高頁面打開速度。

如何壓縮圖片

使用 gulp 來壓縮圖片可以使用下面兩個(gè)插件：

• gulp-imagemin：壓縮率不明顯，可以處理多種圖片格式，可以引入更多第三方優(yōu)化插件。
• gulp-smushit：壓縮率比較大，只能處理 JPG 和 PNG。

例如我們所有的圖片壓縮到 dist 目錄下的 image 文件夾中，下面我們使用 gulp-imagemin 插件來實(shí)現(xiàn)圖片的壓縮，在項(xiàng)目中，除了 PNG 和 JPG 格式的圖片，也有可能有其他格式的圖片。

示例：

首先安裝 gulp-imagemin 插件，命令如下所示：

npm install --save-dev gulp-imagemin

插件安裝成功后，我們就可以在 gulpfile.js 文件中編寫代碼：

// 獲取 gulp
var gulp = require('gulp')
// 獲取 uglify 模塊
var imagemin = require('gulp-imagemin')
// 壓縮圖片任務(wù)
gulp.task('images', function(cb) {
    // 找到圖片
    gulp.src('image/*')
        .pipe(imagemin({
            progressive: true,
        }))
        .pipe(gulp.dest('dist/image'))
        cb()
})

運(yùn)行 gulp images 命令：

image