由于网上大多数的博文已经比较久，参考性不大
版本
-
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
