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

版本

  • 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, 压缩了差不多一半

image-20240314170333568

遇到问题

  • 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

芝士份子
91 声望2 粉丝

引用和评论

0 条评论