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