gulp教程之gulp-imagemin

簡介：

使用gulp-imagemin壓縮圖片文件（包括PNG、JPEG、GIF和SVG圖片）

一、安裝nodejs/全局安裝gulp/本地安裝gulp/建立package.json和gulpfile.js文件

1.一、gulp基本使用還未掌握？請參看： gulp詳細入門教程

1.二、本示例目錄結構以下：

二、本地安裝gulp-imagemin

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

2.二、安裝：命令提示符執行 cnpm install gulp-imagemin --save-dev

2.三、注意：沒有安裝cnpm請使用 npm install gulp-imagemin --save-dev什麼是cnpm，如何安裝？

2.四、說明：--save-dev 保存配置信息至 package.json 的 devDependencies 節點。爲何要保存至package.json？

三、配置gulpfile.js

3.一、基本使用

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.二、gulp-imagemin其餘參數 具體參看

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  默認：3  取值範圍：0-7（優化等級）             progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片             interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染             multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化         }))         .pipe(gulp.dest('dist/img')); });

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.三、只壓縮修改的圖片。壓縮圖片時比較耗時，在不少狀況下咱們只修改了某些圖片，沒有必要壓縮全部圖片，使用」gulp-cache」只壓縮修改的圖片，沒有修改的圖片直接從緩存文件讀取（C:UsersAdministratorAppDataLocalTempgulp-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.一、命令提示符執行：gulp testImagemin

五、結束語

5.一、本文有任何錯誤，或有任何疑問，歡迎留言說明。

 來源：http://www.ydcss.com/archives/26