gulp常用插件之gulp-imagemin使用

更多gulp常用插件使用請訪問：gulp常用插件匯總

---

gulp-imagemin這是一款縮小PNG，JPEG，GIF和SVG圖像的插件。

更多使用文檔請點擊訪問gulp-imagemin工具官網。

安裝

一鍵安裝不多解釋

npm install --save-dev gulp-imagemin

使用

基本的使用：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

exports.default = () => (
	gulp.src('src/images/*')
		.pipe(imagemin())
		.pipe(gulp.dest('dist/images'))
);

自定義插件選項

// …
.pipe(imagemin([
	imagemin.gifsicle({interlaced: true}),
	imagemin.jpegtran({progressive: true}),
	imagemin.optipng({optimizationLevel: 5}),
	imagemin.svgo({
		plugins: [
			{removeViewBox: true},
			{cleanupIDs: false}
		]
	})
]))
// …

請注意，您可能會遇到較舊的隱式語法。在版本低於3的版本中，如下所示：

// …
.pipe(imagemin({
	interlaced: true,
	progressive: true,
	optimizationLevel: 5,
	svgoPlugins: [
		{
			removeViewBox: true
		}
	]
}))
// …

自定義插件選項和自定義gulp-imagemin選項

// …
.pipe(imagemin([
	imagemin.svgo({
		plugins: [
			{
				removeViewBox: true
			}
		]
	})
], {
	verbose: true
}))
// …

只壓縮修改的圖片。壓縮圖片時比較耗時，在很多情況下我們只修改了某些圖片，沒有必要壓縮所有圖片，使用”gulp-cache”只壓縮修改的圖片，沒有修改的圖片直接從緩存文件讀取

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:
隨附以下無損優化器：

• [gifsicle](https://github.com/imagemin/imagemin-gifsicle) — 壓縮GIF圖像
• [jpegtran](https://github.com/imagemin/imagemin-jpegtran) — 壓縮JPEG圖像
• [optipng](https://github.com/imagemin/imagemin-optipng) — 壓縮PNG圖像
• [svgo](https://github.com/imagemin/imagemin-svgo) — 壓縮SVG圖像

** imagemin(plugins?, options?) **

• plugins(外掛程式)
  類型：Array
  默認值：[imagemin.gifsicle(), imagemin.jpegtran(), imagemin.optipng(), imagemin.svgo()]
  要使用的插件。這將覆蓋默認插件。請注意，默認插件具有良好的默認值，並且在大多數情況下應該足夠了。請參閱各個插件以獲取受支持的選項。
• options (選項)
  類型：object

{
            optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優化等級）
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass: true //類型：Boolean 默認：false 多次優化svg直到完全優化
            svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性
            use: [pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件 
}

• verbose(冗長的)
  類型：boolean
  默認值：false
  啟用此功能將在傳遞給的每個圖像上記錄信息gulp-imagemin：

gulp-imagemin: ✔ image1.png (already optimized)
gulp-imagemin: ✔ image2.png (saved 91 B - 0.4%)

• silent(無聲)
  類型：boolean
  默認值：false
  不要記錄已縮小的圖像數。
  --silent如果尚未指定該選項，也可以從命令行使用該標志啟用它。