正文 

当前位置： 首页 > 知识 > java教程

gulp常用插件之gulp-imagemin使用(代码片段)

jiaoshou jiaoshou     2023-04-27     267

关键词：

更多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直到完全优化
  • verbose(冗长的)
    类型：boolean
    默认值：false
    启用此功能将在传递给的每个图像上记录信息gulp-imagemin：
gulp-imagemin: ? image1.png (already optimized)
gulp-imagemin: ? image2.png (saved 91 B - 0.4%)
  • silent(无声)
    类型：boolean
    默认值：false
    不要记录已缩小的图像数。
    --silent如果尚未指定该选项，也可以从命令行使用该标志启用它。

gulp常用插件之wiredep使用

更多gulp常用插件使用请访问：gulp常用插件汇总wiredep这是一款gulp插件，能够将js、css文件自动插入到html中。更多使用文档请点击访问wiredep工具官网。Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript... 查看详情

gulp常用插件之gulp-beautify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-beautify这是一款使用js-beautify进行资产美化插件。更多使用文档请点击访问gulp-beautify工具官网。安装一键安装不多解释npminstall--save-devgulp-beautify使用这是js-beautify的gulp插件。varbea... 查看详情

gulp构建前端自动化工作流之：常用插件介绍及使用

在对Gulp有了一个初步的了解之后，我们开始构建一个较为完整的Gulp开发环境。本文主要分为6个段落：1.构建项目目录结构（DirectoryStructureBuild）2.插件介绍及使用方法（Tasksanddependencies）3.扩展优化（Extend&OptimizeTask）4.其他插... 查看详情

gulp常用插件之gulp-uglify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-uglify这是一款使用UglifyJS缩小js文件。更多使用文档请点击访问gulp-uglify工具官网。安装一键安装不多解释npminstall--save-devgulp-uglify使用vargulp=require('gulp');varuglify=require('gul... 查看详情

gulp常用插件之gulp-plumber使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-plumber这是一款防止因gulp插件的错误而导致管道中断，plumber可以阻止gulp插件发生错误导致进程退出并输出错误日志。更多使用文档请点击访问gulp-plumber工具官网。安装npminstall--s... 查看详情

gulp常用插件之gulp-notify使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-notify这是一款gulp通知插件。更多使用文档请点击访问gulp-notify工具官网。安装一键安装不多解释npminstall--save-devgulp-notify使用例1：varnotify=require("gulp-notify");gulp.src("./src... 查看详情

gulp常用插件之gulp-babel使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-babel这是Babel的Gulp插件。此自述文件适用于gulp-babelv8+Babelv7检查7.x分支以了解使用Babelv6的文档更多使用文档请点击访问gulp-babel工具官网。安装安装gulp-babel，如果你想获得的下一... 查看详情

gulp常用插件之gulp-useref使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来，减小依赖的文件个数，从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来，对区块内的... 查看详情

gulp常用插件之gulp-rev-collector使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-rev-collector这是一款根据gulp-rev生成的manifest.json文件中的映射,去替换文件名称,也可以替换路径。更多使用文档请点击访问gulp-rev-collector工具官网。安装一键安装不多解释npminstall-... 查看详情

gulp常用插件之gulp-rev-rewrite使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-rev-rewrite这是一款重写对由gulp-rev修订的资产的引用。更多使用文档请点击访问gulp-rev-rewrite工具官网。安装一键安装不多解释npminstall--save-devgulp-rev-rewrite使用最常见的使用模式包... 查看详情

gulp教程之静态资源压缩(代码片段)

...：6插件其他参数6.1gulp-html-minify6.2gulp-clean-css6.3gulp-uglify6.4gulp-imagemin7总结本文简单的介绍如何压缩静态资源及使用到的对于插件，下一篇介绍使用gulp如何让文件自动添加版本号。 查看详情

gulp常用插件之rev-del使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总rev-del这是一款从模块（如gulp-rev）生成的修订清单中删除旧的、未使用的指纹文件。更多使用文档请点击访问rev-del工具官网。安装一键安装不多解释npminstall--save-devrev-del使用revDel(ol... 查看详情

gulp常用插件之gulp-inject使用(代码片段)

更多gulp常用插件使用请访问：gulp常用插件汇总gulp-inject这个插件的作用与wiredep类似，不同的是可以自己任意指定需要插入文件的列表。它同样是利用注释来寻找插入的位置。获取源文件流，将每个文件转换为字符串，并将每个... 查看详情

前端构建之--gulp(代码片段)

...为base64的形式，可以自己设置最大多少尺寸转为base648、gulp-imagemin压缩图片大小9 查看详情

gulp-imagemin@8.0.0不能用来找我(代码片段)

打包图片的常见使用package.json最新版本都是使用ES6模块，如果本地使用的require()的话，两个用法不一致导致会出现问题，不如都使用ES6模块，只需要在package.json添加"type":"module"即可。"name":"img&... 查看详情

gulp介绍及常用插件使用方法(代码片段)

...让我们可以专注于代码，提高工作效率。一、API介绍gulp常用的API只有四个：gulp.task(),gulp.src(),gulp.dest(),gulp.watch() 1.gulp.src()输出（Emits）符合所提供的匹配模式（glob）或者匹配模式 查看详情

gulp插件之gulp-livereload

...p-livereload的简介：      gulp-livereload插件用于实时重载，当html，css文件内容发生改变时，浏览器会自动刷新页面。在使用gulp-livereload插件时需要浏览器安装相应的liveReload插件（浏览器插件）一、gulp-livereload... 查看详情

gulp插件之gulp-uglify

...擎，用来压缩js文件，加快网站响应速度。一、gulp-uglify插件的使用1、安装“gulp-uglify”插件命令（在终端进入到项目根目录执行）      npminstall--save-dev&nbs 查看详情