More gulp common plug-ins use please visit: gulp common plug-ins summary
gulp-imagemin This is a narrow PNG, JPEG, GIF and SVG images plugins.
Greater use of the document, please click visit gulp-imagemin tool official website .
installation
A key installation much explanation
npm install --save-dev gulp-imagemin
use
Basic use:
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
exports.default = () => (
gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
Custom plug-in options
// …
.pipe(imagemin([
imagemin.gifsicle({interlaced: true}),
imagemin.jpegtran({progressive: true}),
imagemin.optipng({optimizationLevel: 5}),
imagemin.svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
// …
Please note that you may encounter older implicit syntax. In versions earlier than version 3, as follows:
// …
.pipe(imagemin({
interlaced: true,
progressive: true,
optimizationLevel: 5,
svgoPlugins: [
{
removeViewBox: true
}
]
}))
// …
Custom plug-in options and custom gulp-imagemin options
// …
.pipe(imagemin([
imagemin.svgo({
plugins: [
{
removeViewBox: true
}
]
})
], {
verbose: true
}))
// …
Compression only modify the picture. Time-consuming when compressed images, in many cases, we only modify some of the pictures, there is no need to compress all the pictures, use the " gulp-cache
" compression only modify the picture, the picture does not modify read directly from the cache file
var gulp = require('gulp'),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
//确保本地已安装gulp-cache [cnpm install gulp-cache --save-dev]
cache = require('gulp-cache');
gulp.task('testImagemin', function () {
gulp.src('src/img/*.{png,jpg,gif,ico}')
.pipe(cache(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
})))
.pipe(gulp.dest('dist/img'));
});
API:
with the following non-destructive Optimizer:
[gifsicle](https://github.com/imagemin/imagemin-gifsicle)
- Compression GIF images[jpegtran](https://github.com/imagemin/imagemin-jpegtran)
- JPEG image compression[optipng](https://github.com/imagemin/imagemin-optipng)
- Compression PNG image[svgo](https://github.com/imagemin/imagemin-svgo)
- compressed SVG image
** imagemin(plugins?, options?)
**
plugins
(Plugin)
Type:Array
Default:[imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo()]
to use plug-ins . This will override the default plug-ins. Note that the default plug-in has a good default value, and in most cases should be sufficient. Refer to the individual plug-ins for the supported options.options
(Option)
Type:object
{
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}
verbose
(Long)
type:boolean
Default:false
this feature is enabled on each of the information recorded in the image transmitted togulp-imagemin
:
gulp-imagemin: ✔ image1.png (already optimized)
gulp-imagemin: ✔ image2.png (saved 91 B - 0.4%)
silent
(Silent)
Type:boolean
Default:false
Do not record the number of images have been reduced.
--silent
If this option is not specified, you can use the command line flag to enable it.