在本章中，您将学习如何优化图像.优化将减少图像的大小并有助于加快加载速度.
安装插件以优化图像
从命令转到"工作"目录使用以下命令排序并安装"gulp-changed"和"gulp-imagemin"插件.
npm install gulp-changed --save-devnpm 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
On使用上面的命令运行任务，您将在命令提示符下收到以下结果.
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%)