Gulp教程之图片压缩

WEB前端

Gulp.js 是一个自动化构建工具,Gulp 配置起来非常简单,可以利用Gulp实现很多功能,比如说配合gulp-imagemin实现图片压缩。下面PHP程序员雷雪松详细的介绍一下使用gulp-imagemin压缩图片文件(包括PNG、JPEG、GIF和SVG图片)。

1.、全局安装 gulp

1
$ npm install --global gulp

2、本地安装gulp-imagemin

1
$ npm install gulp-imagemin --save-dev

3、配置gulpfile.js任务(task)
a、基本用法
//将src/img目录下的图片压缩输出到dist/img目录

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp'),
imagemin = require('gulp-imagemin');

gulp.task('imagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:5 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('dist/img'));
});

b、使用imagemin-pngquant深度压缩图片

1
$ npm install imagemin-pngquant --save-dev
1
2
3
4
5
6
7
8
9
10
11
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant');

gulp.task('imagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(imagemin({
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
}))
.pipe(gulp.dest('dist/img'));
});

5、gulp执行压缩图片任务

1
$ gulp imagemin

来源:Gulp教程之图片压缩

2 评论 “Gulp教程之图片压缩

    钟水洲 评论:
    2018年5月5日 下午1:19

    本站已开通投稿,欢迎博主支持!(采纳后提供版权保护,开通作者专栏)

    电商多平台运营 评论:
    2018年6月2日 下午4:16

    新手学习了~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注