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
相关产品推荐
相关产品推荐

