Gulp - 最佳化影像

在本章中，你將瞭解如何最佳化影像。最佳化會減小影像大小並加快載入速度。

安裝最佳化影像的外掛

從命令列進入“work”目錄，並使用以下命令安裝“gulp-changed”和“gulp-imagemin”外掛。

npm install gulp-changed --save-dev
npm install gulp-imagemin --save-dev

宣告依賴關係並建立任務

在配置檔案 gulpfile.js 中，首先宣告依賴關係，如下面的命令所示。

var gulp = require('gulp');
var changed = require('gulp-changed');
var imagemin = require('gulp-imagemin');

接下來，你需要建立用於最佳化影像的任務，如下面的程式碼所示。

gulp.task('imagemin', function() {
   var imgSrc = 'src/images/*.+(png|jpg|gif)',
   imgDst = 'build/images';
   
   gulp.src(imgSrc)
   .pipe(changed(imgDst))
   .pipe(imagemin())
   .pipe(gulp.dest(imgDst));
});

gulp.task('default',['imagemin'],function(){
});

imagemin 任務將接受來自 src/images/ 資料夾的 png、jpg 和 gif 影像，然後在將它們寫到目標位置之前對其進行壓縮。changed() 確保每次僅將新檔案傳遞進來進行壓縮。gulp-changed 外掛將只會處理新檔案，從而利用寶貴的時間。

執行任務

配置檔案已設定好並可以執行了。使用以下命令來執行任務。

gulp

在使用上面的命令執行任務時，你將在命令提示符中收到以下結果。

C:\work>gulp
[15:55:49] Using gulpfile C:\work\gulpfile.js
[15:55:49] Starting 'imagemin'...
[15:55:49] Finished 'imagemin' after 23 ms
[15:55:49] Starting 'default'...
[15:55:49] Finished 'default' after 23 μs
[15:55:54] gulp-imagemin: Minified 1 images (saved 558.3 kB - 8.3%)