Categories
Gulp教程

Gulp-优化图像

Gulp-优化图像


在本章中,您将学习如何优化图像。优化将减小图像的大小并有助于更快地加载。

安装插件以优化图像

从命令行转到“工作”目录,并使用以下命令安装“ 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图像,并将它们最小化,然后再将其写入目标位置。 change()确保每次仅传递新文件以最小化。 gulp更改的插件将仅处理新文件,因此会占用宝贵的时间。

运行任务

配置文件已设置并准备执行。使用以下命令运行任务。

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%)
蜀ICP备20006366号
error: 内容受到保护 !!