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 插件只会处理新文件，因此会占用宝贵的时间。
运行任务
配置文件已设置并准备好执行。使用以下命令运行任务。
使用上述命令运行任务后，您将在命令提示符中收到以下结果。
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%)
