当前位置: 主页 > SEO >

gulp之gulp-imagemin图片压缩优化插件

摘要:在了解gulp安装后,开始新的尝试,和对公司的某些规定,做出自动化的管理,在这篇文章讲简述一下,我安装好glup后的第一个插件,gulp-imagemin

介绍gulp-imagemin

目前,在市场上,有许许多多的优化工具,比分说图好快,切图网,还有tinypng呀等等,但往往用起来都非常的麻烦,还有一下更麻烦的,比分像以前还经常用一下C#之类的来做优化,而说了老半天,或许阅读的网友,应该知道这个插件是干啥的吧,也就是做图片的压缩和处理,更方便,更快的方式达到预估的效果

安装方法:

在安装gulp前提下在当前目录执行以下的命令

cnpm install gulp-imagemin --save-dev

在这里请耐心等待几分钟,知道出现这3个,可别退出哟~~!

gulp之gulp-imagemin图片压缩优化插件

配置gulpfile.js

在之前的文章中,没有叙述到gulpfile.js是做什么的,所以,在这简单的提一下,就是用来配置执行插件的配置文件,直接在里面做出插件的路径指令和一些,输出配置等

基本的配置:

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


    推荐配置:

var gulp = require('gulp'),
    imagemin = require('gulp-imagemin');
 
gulp.task('testImagemin', function () {
    gulp.src('src/img/*/*.{png,jpg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 7, //类型:Number  默认:3  取值范围:0-7(优化等级)
            progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
            interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
            multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
        }))
        .pipe(gulp.dest('dist/img'));
});


深度配置:

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


下面这个方法,是优化的图片就不再压缩,直接输出,只优化未被优化的文件,可大大提高优化的速度

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


执行命令

gulp testImagemin

[日志信息]

该日志于 2016-08-09 13:38 由 陈文超 发表在 陈文超前端博客 网站下,你除了可以发表评论外,还可以转载 “gulp之gulp-imagemin图片压缩优化插件” 日志到你的网站或博客,但是请保留源地址及作者信息,谢谢!!    (尊重他人劳动,你我共同努力)

Copyright © 2015-2016 陈文超博客 保留所有权利 琼ICP备15003229号| 托管于阿里云 · 博客稳定运行 | 网站地图 |

返回顶部