原文：http://www.ydcss.com/archives/26

簡介：

使用gulp-imagemin壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片），很多人安裝gulp-imagemin都會出現(xiàn)錯誤，我也查了很多資料，也不知道所以然，我的做法是出錯再重新安裝，如果你知道問題所在，請一定告訴我！

1、安裝nodejs/全局安裝gulp/本地安裝gulp/創(chuàng)建package.json和gulpfile.js文件

1.1、gulp基本使用還未掌握？請參看：?gulp詳細(xì)入門教程

1.2、本示例目錄結(jié)構(gòu)如下：

2、本地安裝gulp-imagemin

2.1、github：https://github.com/sindresorhus/gulp-imagemin

2.2、安裝：命令提示符執(zhí)行?cnpm install gulp-imagemin --save-dev

2.3、注意：沒有安裝cnpm請使用?npm install gulp-imagemin --save-dev什么是cnpm，如何安裝？

2.4、說明：--save-dev?保存配置信息至 package.json 的 devDependencies 節(jié)點(diǎn)。為什么要保存至package.json？

3、配置gulpfile.js

3.1、基本使用

JavaScript

1 2 3 4 5 6 7 8

var gulp = require('gulp'), ????imagemin = require('gulp-imagemin'); gulp.task('testImagemin', function () { ????gulp.src('src/img/*.{png,jpg,gif,ico}') ????????.pipe(imagemin()) ????????.pipe(gulp.dest('dist/img')); });

3.2、gulp-imagemin其他參數(shù)?具體參看

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13

var gulp = require('gulp'), ????imagemin = require('gulp-imagemin'); gulp.task('testImagemin', function () { ????gulp.src('src/img/*.{png,jpg,gif,ico}') ????????.pipe(imagemin({ ????????????optimizationLevel: 5, //類型：Number??默認(rèn)：3??取值范圍：0-7（優(yōu)化等級） ????????????progressive: true, //類型：Boolean 默認(rèn)：false 無損壓縮jpg圖片 ????????????interlaced: true, //類型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染 ????????????multipass: true //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化 ????????})) ????????.pipe(gulp.dest('dist/img')); });

3.3、深度壓縮圖片

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14

var gulp = require('gulp'), ????imagemin = require('gulp-imagemin'), ????//確保本地已安裝imagemin-pngquant [cnpm install imagemin-pngquant --save-dev] ????pngquant = require('imagemin-pngquant'); gulp.task('testImagemin', function () { ????gulp.src('src/img/*.{png,jpg,gif,ico}') ????????.pipe(imagemin({ ????????????progressive: true, ????????????svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性 ????????????use: [pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件 ????????})) ????????.pipe(gulp.dest('dist/img')); });

3.3、只壓縮修改的圖片。壓縮圖片時比較耗時，在很多情況下我們只修改了某些圖片，沒有必要壓縮所有圖片，使用”gulp-cache”只壓縮修改的圖片，沒有修改的圖片直接從緩存文件讀取（C:\Users\Administrator\AppData\Local\Temp\gulp-cache）。

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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')); });

4、執(zhí)行任務(wù)

4.1、命令提示符執(zhí)行：gulp testImagemin

轉(zhuǎn)載于:https://www.cnblogs.com/HendSame-JMZ/articles/6183050.html

總結(jié)

以上是生活随笔為你收集整理的gulp教程之gulp-imagemin（gulp-imagemin压缩图片文件）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。