gulp-imagemin版本9圖片壓縮

爆发的驴子發表於2024-03-14

由於網上大多數的博文已經比較久，參考性不大

版本

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

這裡發現一個問題是，有些壓縮效果並不明顯

PixPin_2024-03-14_16-22-39

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' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���


[-/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' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���


[-/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

前端圖片壓縮 - H5&Uni-App圖片壓縮
2020-11-30
前端H5APP
?‍?圖片壓縮Canvas
2019-03-25
Canvas
IOS圖片壓縮
2016-09-03
iOS
canvas 壓縮圖片
2024-04-24
Canvas
Nginx網路壓縮 CSS壓縮圖片壓縮 JSON壓縮
2022-02-08
NginxCSSJSON
圖片壓縮知識梳理(9) 選擇合適的圖片格式
2017-12-21
圖片壓縮知識梳理(0) 圖片壓縮學習計劃
2017-12-21
iOS 圖片壓縮方法
2019-01-09
iOS
前端圖片壓縮方案
2023-02-08
前端
前端的圖片壓縮image-compressor（可在圖片上傳前實現圖片壓縮）
2018-04-17
前端
SmallImage for Mac(圖片壓縮工具)
2020-08-25
Mac
js上傳圖片壓縮
2019-02-16
JS
js圖片壓縮推薦
2020-10-26
JS
JNI實現圖片壓縮
2018-04-15
android下圖片壓縮
2013-11-26
Android
java後臺壓縮圖片
2015-10-23
Java
【前端】壓縮圖片以及圖片相關概念
2020-12-07
前端
vue 上傳圖片進行壓縮圖片
2020-09-25
Vue
Android壓縮圖片後再上傳圖片
2016-05-24
Android
圖片壓縮怎樣操作？分享幾種實用的批次圖片壓縮技巧
2020-03-30
png格式如何壓縮，圖片壓縮工具哪個好
2019-04-22
圖片壓縮不求人，3個親測實用高效的圖片壓縮神器
2017-05-01
怎麼轉換圖片格式並壓縮圖片
2019-07-08
Android 載入大圖片,不壓縮圖片
2016-02-24
Android
前端圖片壓縮及上傳
2019-02-02
前端
利用 canvas 實現圖片壓縮
2018-07-15
Canvas
Image Optimizer for Mac(圖片壓縮工具)
2022-03-21
Mac
Bitmap的圖片壓縮彙總
2018-03-29
js 壓縮圖片 H5
2015-11-13
JSH5
excel檔案裡的圖片怎麼壓縮？excel檔案裡圖片的壓縮方法
2019-11-12
Excel
iOS開發中壓縮圖片的質量以及縮小圖片尺寸
2017-07-14
iOS
影像體積壓縮工具JPEG Jackal更好的壓縮圖片
2020-12-01
使用 JavaScript 壓縮和翻轉圖片
2019-07-26
JavaScript
JS—圖片壓縮上傳（單張）
2018-08-13
JS
Squeezer for Mac(Mac圖片壓縮軟體)
2022-09-11
Mac
Android 中圖片壓縮分析（上）
2017-11-13
Android
淺談Flutter web 圖片選擇器及圖片壓縮
2020-07-06
FlutterWeb
圖片壓縮演算法 3M壓縮到200K
2013-11-20
演算法

gulp-imagemin版本9圖片壓縮

版本

gulpfile.js

遇到問題

相關文章