由于网上大多数的博文已经比较久，参考性不大

版本

  • gulp

    PS D:\XXX\github\hexo> gulp -v
    
CLI version: 2.3.0
    
Local version: 4.0.2

  • gulp-imagemin

    9.0.0

  • node

    PS D:\XXX\github\hexo> node -v
    
v20.10.0
    
PS D:\XXX\github\hexo> npm -v
    
10.2.3
    
PS D:\XXX\github\hexo>

gulpfile.js

import gulp from 'gulp';

import imagemin from 'gulp-imagemin';

let imgSrc = 'source/images/*.*'

let imgDist = 'source/images2'

// 压缩图片

export default (cb) => {

	return gulp.src([imgSrc])

	.pipe(imagemin())

    .pipe(gulp.dest(imgDist));

}

如果需要对某种类型进行配置

import gulp from 'gulp';

import imagemin, {optipng} from 'gulp-imagemin';

let imgSrc = 'source/images/*.*'

let imgDist = 'source/images2'

// 压缩图片

export default (cb) => {

	return gulp.src([imgSrc])

	.pipe(imagemin(optipng({optimizationLevel: 5})))

    .pipe(gulp.dest(imgDist));

}

如果希望已经压缩过的图片不再次压缩，可以结合gulp-cache

import gulp from 'gulp';

import imagemin from 'gulp-imagemin';

import cache from 'gulp-cache';

let imgSrc = 'source/images3/*.*'

let imgDist = 'source/images2'

// 压缩图片

export default (cb) => {

	return gulp.src([imgSrc])

	.pipe(cache(imagemin()))

    .pipe(gulp.dest(imgDist));

}

输出对比结果

// 第一次执行

PS D:\XXX\github\hexo> gulp

[16:55:41] Using gulpfile D:\XXX\github\hexo\gulpfile.js

[16:55:41] Starting 'default'...

gulp-imagemin: Minified 1 image (saved 116 kB - 8.7%)

[16:55:48] Finished 'default' after 7.23 s

// 再次执行命令

PS D:\XXX\github\hexo> gulp

[16:55:55] Using gulpfile D:\XXX\github\hexo\gulpfile.js

[16:55:55] Starting 'default'...

gulp-imagemin: Minified 0 images

[16:55:55] Finished 'default' after 98 ms

新增一个图片测试

PS D:\XXX\github\hexo> gulp

[16:58:15] Using gulpfile D:\XXX\github\hexo\gulpfile.js

[16:58:15] Starting 'default'...

gulp-imagemin: Minified 1 image (saved 208 kB - 40.4%)

[16:58:20] Finished 'default' after 5 s

这里发现一个问题是，有些压缩效果并不明显

gulp-imagemin: Minified 1 image (saved 116 kB - 8.7%)

[16:55:48] Finished 'default' after 7.23 s

但如果你上传到tinypng, 压缩了差不多一半

遇到问题

  • Cannot use import statement outside a module

    D:\XXX\github\hexo\gulpfile.js:17
    
import gulp from 'gulp';
    
^^^^^^

SyntaxError: Cannot use import statement outside a module
    
    at Object.compileFunction (node:vm:352:18)
    
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    
    at Module.load (node:internal/modules/cjs/loader:981:32)
    
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    
    at require (node:internal/modules/cjs/helpers:102:18)

    需要在package.json加上"type": "module"

    {
    
    "name": "hexo-site",
    
    "version": "0.0.0",
    
    "private": true,
    
    "type": "module",
    
    "devDependencies": {
    
        "gulp": "^4.0.2",
    
        "gulp-imagemin": "^9.0.0"
    
    }
    
}

  • 一、Cannot find module 'optipng-bin'

    er Error: Cannot find module 'optipng-bin'
    
Require stack:
    
- D:\XXX\github\hexo\node_modules\imagemin-optipng\index.js
    
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    
    at Module._load (node:internal/modules/cjs/loader:985:27)
    
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    
    at require (node:internal/modules/helpers:176:18)
    
    at Object.<anonymous> (D:\XXX\github\hexo\node_modules\imagemin-optipng\index.js:4:17)
    
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    
    at cjsLoader (node:internal/modules/esm/translators:345:17) {
    
  code: 'MODULE_NOT_FOUND',
    
  requireStack: [
    
    'D:\\XXX\\github\\hexo\\node_modules\\imagemin-optipng\\index.js'
    
  ]
    
}

  • 二、gulp-imagemin: Could not load default plugin ***

    [11:32:18] Using gulpfile D:\XXX\github\hexo\gulpfile.js
    
[11:32:18] Starting 'default'...
    
er Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'mozjpeg' imported from D:\XXX\github\hexo\node_modules\imagemin-mozjpeg\index.js
    
    at packageResolve (node:internal/modules/esm/resolve:844:9)
    
    at moduleResolve (node:internal/modules/esm/resolve:901:20)
    
    at defaultResolve (node:internal/modules/esm/resolve:1121:11)
    
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    
    at link (node:internal/modules/esm/module_job:84:36) {
    
  code: 'ERR_MODULE_NOT_FOUND'
    
}
    
gulp-imagemin: Could not load default plugin `mozjpeg`
    
er Error: Cannot find module 'gifsicle'
    
Require stack:
    
- D:\XXX\github\hexo\node_modules\imagemin-gifsicle\index.js
    
    at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)
    
    at Module._load (node:internal/modules/cjs/loader:985:27)
    
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    
    at require (node:internal/modules/helpers:176:18)
    
    at Object.<anonymous> (D:\XXX\github\hexo\node_modules\imagemin-gifsicle\index.js:3:18)
    
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    
    at cjsLoader (node:internal/modules/esm/translators:345:17) {
    
  code: 'MODULE_NOT_FOUND',
    
  requireStack: [
    
    'D:\\XXX\\github\\hexo\\node_modules\\imagemin-gifsicle\\index.js'
    
  ]
    
}
    
gulp-imagemin: Could not load default plugin `gifsicle`
    
er Error [ERR_REQUIRE_ESM]: require() of ES Module D:\XXX\github\hexo\node_modules\optipng-bin\index.js from D:\XXX\github\hexo\node_modules\imagemin-optipng\index.js not supported.
    
Instead change the require of D:\XXX\github\hexo\node_modules\optipng-bin\index.js in D:\XXX\github\hexo\node_modules\imagemin-optipng\index.js to a dynamic import() which is available in all CommonJS modules.
    
    at Object.<anonymous> (D:\XXX\github\hexo\node_modules\imagemin-optipng\index.js:4:17) {
    
  code: 'ERR_REQUIRE_ESM'
    
}
    
gulp-imagemin: Could not load default plugin `optipng`
    
[11:32:22] 'default' errored after 3.81 s
    
[11:32:22] Error in plugin "gulp-imagemin"
    
TypeError: function_ is not a function
    
    at file:///D:/XXX/github/hexo/node_modules/p-pipe/index.js:10:25
    
    at imagemin.buffer (file:///D:/XXX/github/hexo/node_modules/imagemin/index.js:75:26)
    
    at gulpPlugin.onFinish (file:///D:/XXX/github/hexo/node_modules/gulp-imagemin/index.js:59:31)
    
    at async file:///D:/XXX/github/hexo/node_modules/gulp-plugin-extras/index.js:19:12
    
    at async file:///D:/XXX/github/hexo/node_modules/easy-transform-stream/index.js:14:20

  • 三、Error in plugin "gulp-imagemin"

    [19:04:18] Using gulpfile D:\XXX\github\hexo\gulpfile.js
    
[19:04:18] Starting 'default'...
    
[19:04:22] 'default' errored after 3.61 s
    
[19:04:22] Error in plugin "gulp-imagemin"
    
Error: spawn D:\XXX\github\hexo\node_modules\.pnpm\optipng-bin@7.0.1\node_modules\optipng-bin\vendor\optipng.exe ENOENT
    
    at notFoundError (D:\XXX\github\hexo\node_modules\.pnpm\cross-spawn@5.1.0\node_modules\cross-spawn\lib\enoent.js:11:11)
    
    at verifyENOENT (D:\XXX\github\hexo\node_modules\.pnpm\cross-spawn@5.1.0\node_modules\cross-spawn\lib\enoent.js:46:16)
    
    at cp.emit (D:\XXX\github\hexo\node_modules\.pnpm\cross-spawn@5.1.0\node_modules\cross-spawn\lib\enoent.js:33:19)
    
    at ChildProcess._handle.onexit (node:internal/child_process:294:12)
    
    at Process.callbackTrampoline (node:internal/async_hooks:130:17)

    一、二、三同种问题，由于使用npm/yarn/pnpm install安装的时候并没有完全安装成功

    // pnpm失败跳出
    
node_modules/.pnpm/optipng-bin@7.0.1/node_modules/optipng-bin: Running postinstall script, failed in 7.3s (skipped as optional)dules/.pnpm/mozjpeg@8.0.0/node_modules/mozjpeg: Running postinstall script, failed in 4.6s (skipped as optional)
    
node_modules/.pnpm/gifsicle@5.3.0/node_modules/gifsicle: Running postinstall script, failed in 3s (skipped as optional)

// yarn失败跳出
    
[4/4] Building fresh packages...
    
[-/9] ⢀ waiting...
    
[2/9] ⢀ hexo-util
    
[8/9] ⢀ optipng-bin
    
[7/9] ⠠ mozjpeg
    
warning Error running install script for optional dependency: "D:\\XXX\\github\\hexo\\node_modules\\gifsicle: Command failed.
    
Exit code: 1
    
Command: node lib/install.js
    
Arguments:
    
Directory: D:\\XXX\\github\\hexo\\node_modules\\gifsicle
    
Output:
    
unable to verify the first certificate
    
gifsicle pre-build test failed
    
compiling from source
    
Error: Command failed: C:\\Windows\\system32\\cmd.exe /s /c \"autoreconf -ivf\"
    
'autoreconf' �����ڲ����ⲿ���Ҳ���ǿ����еij���
    
���������ļ���

[-/9] ⠈ waiting...
    
[-/9] ⠈ waiting...
    
[8/9] ⠈ optipng-bin
    
[7/9] ⠁ mozjpeg
    
warning Error running install script for optional dependency: "D:\\XXX\\github\\hexo\\node_modules\\mozjpeg: Command failed.
    
Exit code: 1
    
Command: node lib/install.js
    
Arguments:
    
Directory: D:\\XXX\\github\\hexo\\node_modules\\mozjpeg
    
Output:
    
unable to verify the first certificate
    
mozjpeg pre-build test failed
    
compiling from source
    
Error: Command failed: C:\\Windows\\system32\\cmd.exe /s /c \"autoreconf -fiv\"
    
'autoreconf' �����ڲ����ⲿ���Ҳ���ǿ����еij���
    
���������ļ���

[-/9] ⡀ waiting...
    
[-/9] ⡀ waiting...
    
[8/9] ⡀ optipng-bin
    
[-/9] ⢀ waiting...
    
warning Error running install script for optional dependency: "D:\\XXX\\github\\hexo\\node_modules\\optipng-bin: Command failed.
    
Exit code: 1
    
Command: node lib/install.js
    
Arguments:
    
Directory: D:\\XXX\\github\\hexo\\node_modules\\optipng-bin
    
Output:
    
unable to verify the first certificate
    
optipng pre-build test failed
    
compiling from source

    解决方案：重新安装

    // 如果曾经安装过gulp-imagemin，有时需要删除才可以
    
rm -rf node_modules
    
// !!!记住顺序
    
cnpm i optipng-bin -D
    
cnpm i gulp-imagemin -D

  • EPERM: operation not permitted(npm install出现)

    npm WARN cleanup Failed to remove some directories [
    
npm WARN cleanup   [
    
npm WARN cleanup     'D:\\XXX\\github\\hexo\\node_modules',
    
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'D:\XXX\github\hexo\node_modules\readable-web-to-node-stream\node_modules\readable-stream\lib\internal'] {
    
npm WARN cleanup       errno: -4048,
    
npm WARN cleanup       code: 'EPERM',
    
npm WARN cleanup       syscall: 'rmdir',
    
npm WARN cleanup       path: 'D:\\XXX\\github\\hexo\\node_modules\\readable-web-to-node-stream\\node_modules\\readable-stream\\lib\\internal'
    
npm WARN cleanup     }
    
npm WARN cleanup   ],
    
npm WARN cleanup   [
    
npm WARN cleanup     'D:\\XXX\\github\\hexo\\node_modules\\htmlparser2',
    
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'D:\XXX\github\hexo\node_modules\htmlparser2\node_modules'] {
    
npm WARN cleanup       errno: -4048,
    
npm WARN cleanup       code: 'EPERM',
    
npm WARN cleanup       syscall: 'rmdir',
    
npm WARN cleanup       path: 'D:\\XXX\\github\\hexo\\node_modules\\htmlparser2\\node_modules'
    
npm WARN cleanup     }
    
npm WARN cleanup   ],
    
npm WARN cleanup   [
    
npm WARN cleanup     'D:\\XXX\\github\\hexo\\node_modules\\jsdom',
    
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'D:\XXX\github\hexo\node_modules\jsdom'] {
    
npm WARN cleanup       errno: -4048,
    
npm WARN cleanup       code: 'EPERM',
    
npm WARN cleanup       syscall: 'rmdir',
    
npm WARN cleanup       path: 'D:\\XXX\\github\\hexo\\node_modules\\jsdom'
    
npm WARN cleanup     }
    
npm WARN cleanup   ],
    
npm WARN cleanup   [
    
npm WARN cleanup     'D:\\XXX\\github\\hexo\\node_modules\\gulp-imagemin',
    
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'D:\XXX\github\hexo\node_modules\gulp-imagemin\node_modules'] {
    
npm WARN cleanup       errno: -4048,
    
npm WARN cleanup       code: 'EPERM',
    
npm WARN cleanup       syscall: 'rmdir',
    
npm WARN cleanup       path: 'D:\\XXX\\github\\hexo\\node_modules\\gulp-imagemin\\node_modules'
    
npm WARN cleanup     }
    
npm WARN cleanup   ]
    
npm WARN cleanup ]
    
npm ERR! code 1
    
npm ERR! path D:\XXX\github\hexo\node_modules\optipng-bin
    
npm ERR! command failed
    
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node lib/install.js
    
npm ERR! compiling from source
    
npm ERR! unable to verify the first certificate
    
npm ERR! optipng pre-build test failed
    
npm ERR! Error: Command failed: C:\Windows\system32\cmd.exe /s /c "./configure --with-system-zlib --prefix="D:\XXX\github\hexo\node_modules\optipng-bin\vendor" --bindir="D:\XXX\github\hexo\node_modules\optipng-bin\vendor""

    package.json中先删除gulp-imagemin和optipng-bin

    {
    
  "devDependencies": {
    
    "gulp": "^4.0.2",
    
    "gulp-imagemin": "^9.0.0",
    
    "optipng-bin": "^9.0.0"
    
  }
    
}

    再重新安装

    rm -rf node_modules
    
yarn install
    
cnpm i optipng-bin -D
    
cnpm i gulp-imagemin -D

gulp-imagemin版本9图片压缩的更多相关文章

  1. Gulp自动化工具之图片压缩

    一.安装node https://nodejs.org/download/ 根据需要选择对应的版本 安装好了之后可以通过node -v参看一下版本 node -v 二.安装gulp npm insta ...

  2. 前端构建工具之gulp（一）「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  3. gulp图片压缩

    gulp图片压缩 网页性能优化,通常要处理图片,尤其图片量大的时候,更需要工具来批量处理,这里使用gulp,做个简单总结 image-resize压缩尺寸 var gulp = require('gu ...

  4. gulp-imagemin图片压缩----gulp系列（三)

    本节实现图片压缩,在实现压缩前,先配置images任务,设置源目录和输出目录. 在系列(二)代码的基础上,再进行扩展. 1.找到gulp->config.js,对images进行源目录(src- ...

  5. 续Gulp使用入门三步压缩图片

    gulp 压缩图片 压缩 图片文件可降低文件大小,提高图片加载速度. 找到规律转换为 gulp 代码 规律 找到 images/ 目录下的所有文件,压缩它们,将压缩后的文件存放在 dist/image ...

  6. Gulp 之图片压缩合并

    同事需要处理很多的图片,由于UI那边提供图片比较大,为了性能好一点,程序包小一点,因此希望我帮忙做成小程序来完成此工作. 其实之前做过一个grunt写的图片压缩合并工具,当时是为了处理270多个国家/ ...

  7. gulp静态资源构建、压缩、版本号添加

    公司移动端商城使用前后分离方案,前台nginx静态文件,js使用requirejs模式,使用gulp压缩添加版本号时发现问题, 问题1.在公共的js配置中,引用的路径是写死的,缓存会一直存在. 解决方 ...

  8. 一篇迟到的gulp文章，代码合并压缩，less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...

  9. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  10. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

随机推荐

  1. laravel生成二维码，并添加背景图片，图标logo

    1.安装组件 composer require simplesoftwareio/simple-qrcode 1.3.* 在 config/app.php 注册服务提供者: SimpleSoftwar ...

  2. 《ASP.NET Core 与 RESTful API 开发实战》-- （第8章）-- 读书笔记（上）

    第 8 章 认证和安全 8.1 认证 认证(Authentication)是指验证用户身份的过程,授权(Authorization)是验证一个已经通过认证的用户是否有权限做某些事的过程 常见的 HTT ...

  3. 金仓数据库(kingbase)的system用户被锁的解锁步骤

    今天发现我安装的金仓数据库(kingbase)的system用户被锁了,无法登陆.百度搜了下,使用SUPERMANAGER_V8ADMIN可以解锁,试了下果然如此.解锁步骤如下: 用户:SUPERMA ...

  4. 云计算 - 负载均衡SLB方案全解与实战

    云计算 - 负载均衡SLB方案全解与实战,介绍SLB的核心技术.用户最佳实践.阿里云 SLB产品举例.应用场景. 关注[TechLeadCloud],分享互联网架构.云服务技术的全维度知识.作者拥有1 ...

  5. Java集合篇之深入解析ArrayList，这六问你答的上来吗？

    写在开头 开年第一篇,先祝各位新的一年身体健康,学业有成,事业有成哈,春节期间就是咔咔乱吃,咔咔乱玩,把学习都抛一边子去了,已经9天没有学习了,深深的懊悔,从今天开始,2024年的学习正式开启,一起给 ...

  6. Spring Boot学生信息管理系统项目实战-3.专业管理

    1.获取源码 源码是捐赠方式获取,详细请QQ联系我 :) 2.实现效果 3.项目源码 只挑重点讲,详细请看源码. 专业管理实现学校专业的增删改查,与学院管理相关联. 前端代码 <!--编辑表单- ...

  7. 一秒出图？SDXL-Turbo实时AI绘画整合包下载

    SDXL Turbo是一种快速生成的AI构图模型,它基于一种称为对抗性扩散蒸馏的新训练方法,该方法允许在1到4个步骤中以高图像质量对大规模基础图像扩散模型进行采样,并将其与对抗性损失相结合,以确保即使 ...

  8. Xray安全评估工具使用

    xray 是一款功能强大的安全评估工具,主要特性有: 检测速度快.发包速度快; 漏洞检测算法高效. 支持范围广.大至 OWASP Top 10 通用漏洞检测,小至各种 CMS 框架 POC,均可以支持 ...

  9. dataclass装饰器

    简介 根据定义dataclass时指"一个带有默认值的可变的namedtuple" 简单来说,就是你定义一个很普通的类,@dataclass装饰器可以 帮你生成__repr__._ ...

  10. django自定义模型管理器Manager及方法

    django自定义模型管理器Manager及方法 自定义管理器(Manager) 在语句Book.objects.all()中,objects是一个特殊的属性,通过它来查询数据库,它就是模型的一个Ma ...