gulp教程之gulp-imagemin

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

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

1.2、本示例目錄結構如下：

2、本地安裝gulp-imagemin

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

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

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

2.4、說明：--save-dev 保存配置信息至 package.json 的 devDependencies 節點。為什么要保存至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其他參數 具體參看

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.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、執行任務

4.1、命令提示符執行：gulp testImagemin

5、結束語

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

下載附件