You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Gulp imagemin压缩图片耗时过长问题求助

gulp images 图片压缩耗时过长问题

执行gulp images命令压缩1张及以上图片时,耗时可达2-3分钟。已尝试将gulp-imagemin降级至7.1.0版本,也调整过代码逻辑,但问题仍未解决。以下是当前使用的gulpfile.js代码及package.json配置:

gulpfile.js 代码

"use strict"

const { src, dest } = require("gulp")
const gulp = require("gulp")
const autoprefixer = require("gulp-autoprefixer")
const cssbeautify = require("gulp-cssbeautify")
const removeComments = require("gulp-strip-css-comments")
const rename = require("gulp-rename")
const sass = require("gulp-sass")(require('sass'))
const cssnano = require("gulp-cssnano")
const uglify = require("gulp-uglify")
const plumber = require("gulp-plumber")
const panini = require("panini")
const imagemin = require("gulp-imagemin")
const del = require("del")
const rigger = require("gulp-rigger")
const browserSync = require("browser-sync").create()

/*paths */
const srcPath = "src/"
const distPath = "dist/"

const path = {
    build: {
        html: distPath,
        css: distPath + "assets/css",
        js: distPath + "assets/js",
        images: distPath + "assets/images",
        fonts: distPath + "assets/fonts"
    },
    src: {
        html: srcPath + "*.html",
        css: srcPath + "assets/scss/*.scss",
        js: srcPath + "assets/js/*.js",
        images: srcPath + "assets/images/**/*.{jpg,png,svg,ico,webp,webmanifest,xml,json}",
        fonts: srcPath + "assets/fonts/**/*.{svg,eot,woff2,ttf,woff}"
    },
    watch: {
        html: srcPath + "**/*.html",
        css: srcPath + "assets/scss/**/*.scss",
        js: srcPath + "assets/js/**/*.js",
        images: srcPath + "assets/images/**/*.{jpg,png,svg,ico,webp,webmanifest,xml,json}",
        fonts: srcPath + "assets/fonts/**/*.{svg,eot,woff2,ttf,woff}"
    },
    clean: "./" + distPath
}

function html() { 
    return src(path.src.html, {base:srcPath})
        .pipe(plumber())
        .pipe(dest(path.build.html))
}

function css(){
    return src(path.src.css, {base:srcPath + "assets/scss/"})
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cssbeautify())
        .pipe(dest(path.build.css))
        .pipe(cssnano({
            zindex:false,
            discardComments:{
                removeAll:true
            }
        }))
        .pipe(removeComments())
        .pipe(rename({
            suffix:".min",
            extname: ".css"
        }))
        .pipe(dest(path.build.css))
}
function js(){
    return src(path.src.js, {base:srcPath + "assets/js/"})
    .pipe(plumber())
    .pipe(rigger())
    .pipe(dest(path.build.js))
    .pipe(uglify())
    .pipe(rename({
        suffix:".min",
        extname: ".js"
    }))
    .pipe(dest(path.build.js))

}


function images(){
    return src(path.src.images, {base:srcPath + "assets/images/"})
    .pipe(imagemin([
        imagemin.gifsicle({interlaced: true}),
        imagemin.mozjpeg({quality: 75, progressive: true}),
        imagemin.optipng({optimizationLevel: 5}),
        imagemin.svgo({
            plugins: [
                {removeViewBox: true},
                {cleanupIDs: false}
            ]
        })
    ]))
      .pipe(dest(path.build.images))
}

exports.html = html
exports.css = css
exports.js = js
exports.images = images

package.json 配置

{
    "name": "gulp-site",
    "version": "1.0.0",
    "description": "new gulp website",
    "author": "Me",
    "devDependencies": {
        "browser-sync": "^2.27.11",
        "del": "^6.0.0",
        "gulp": "^4.0.2",
        "gulp-autoprefixer": "^8.0.0",
        "gulp-cssbeautify": "^3.0.1",
        "gulp-cssnano": "^2.1.3",
        "gulp-imagemin": "^7.1.0",
        "gulp-plumber": "^1.2.1",
        "gulp-rename": "^2.0.0",
        "gulp-rigger": "^0.5.8",
        "gulp-sass": "^5.1.0",
        "gulp-strip-css-comments": "^2.0.0",
        "gulp-uglify": "^3.0.2",
        "imagemin-jpegtran": "^7.0.0",
        "panini": "^1.7.2",
        "sass": "^1.57.1"
    }
}

优化建议

  • 缩小文件匹配范围:当前images任务包含了webmanifest、xml、json等非图片文件,这些文件无需压缩,从路径规则中移除可减少不必要的处理。
  • 降低优化等级:把optipng的optimizationLevel从5调低到2-3,mozjpeg可尝试降低quality值或关闭progressive选项,平衡压缩效果与速度。
  • 缓存已处理文件:添加gulp-cache插件,跳过已经压缩过的图片,避免重复劳动。
  • 并行处理图片:调整imagemin的concurrency参数,或结合并行任务插件,同时处理多个图片提升效率。

内容的提问来源于stack exchange,提问作者Demotivator Motivator

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.05 04:50:24