Gulp 优化图像基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
在本章中,您将学习如何优化图像。优化将减小图像的大小并有助于加快加载速度。
安装插件以优化图像
从命令行转到"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%)