【四】gulp之用gulp-imagemin压缩图片

如何用````gulp```压缩图片?

目录结构如下:

Paste_Image.png
  • 1)在命令行进入gulpDay4目录安装所需插件 gulp-imagemin
npm install gulp-imagemin
  • 2)新建gulpfile.js 写入以下代码(具体解释见代码注释)
//引用gulp
var gulp = require('gulp'),
//引用我们要用的gulp-imagemin
  imagemin = require('gulp-imagemin');
//建立一个imagemin任务 直接可以用 gulp imagemin就可以执行这个任务
gulp.task('imagemin', function() {
  gulp.src('develop/images/*.{png,jpg,gif,ico}')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));//输入压缩完成的图片到dist目录
});
  • 3)运行任务
Paste_Image.png

说明:最后显示已经压缩17个图片文件,节约了321Kb空间

  • 4)查看压缩结果
Paste_Image.png

gulp-imagemin的npm地址

gulp-imagemin插件文档
这个插件可以压缩很多图片文件,例如:PNG, JPEG, GIF 、SVG
更多插件配置等,请自行查看文档研究。

注:本系列文章只做简单入门,深入了解请自行修行。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容