Gulp - Tối ưu hóa hình ảnh

Trong chương này, bạn sẽ học cách tối ưu hóa hình ảnh. Tối ưu hóa sẽ giảm kích thước của hình ảnh và hỗ trợ tải nhanh hơn.

Cài đặt các plugin để tối ưu hóa hình ảnh

Đi tới thư mục “công việc” từ dòng lệnh của bạn và cài đặt các plugin “gulp-change” và “gulp-imagemin” bằng cách sử dụng các lệnh sau.

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

Khai báo sự phụ thuộc và tạo nhiệm vụ

Trong tệp cấu hình của bạn gulpfile.js, đầu tiên hãy khai báo các phụ thuộc như trong lệnh sau.

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

Tiếp theo, bạn cần tạo các nhiệm vụ để tối ưu hóa hình ảnh như trong đoạn mã sau.

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(){
});

Các imagemintask sẽ chấp nhận các ảnh png, jpg và gif từ thư mục src / images / và thu nhỏ chúng trước khi ghi nó vào đích. Cácchanged()đảm bảo rằng chỉ các tệp mới được chuyển trong mỗi lần thu nhỏ. Các ngụm-thay đổi plugin sẽ chỉ xử lý các tập tin mới và thời gian quý báu do đó sử dụng.

Chạy nhiệm vụ

Tệp cấu hình đã được thiết lập và sẵn sàng thực thi. Sử dụng lệnh sau để chạy tác vụ.

gulp

Khi chạy tác vụ bằng lệnh trên, bạn sẽ nhận được kết quả sau trong dấu nhắc lệnh.

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%)