英文:
GULP | Gulp imagemin takes too much time to convert images
问题
这是我的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();
/*路径 */
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;
当我尝试使用终端命令gulp images来压缩1个或多个图像时,需要大约2-3分钟。我尝试切换到较旧的版本(7.1.0),但情况没有改变。
这是我的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"
}
}
我尝试切换版本,尝试更改代码,但没有改变。
英文:
Here is my gulpfile.js code:
"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
When i try to compress 1 and more images using terminal command gulp images, it takes around 2-3 minutes. I tried to swich the version by older ( 7.1.0 ), but this doesn't changed the situation.
screen from terminal
Here is my 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"
}
}
I tried to swich versions, i tried to change my code, but nothing changed.
答案1
得分: 0
我也遇到了这个问题,但看起来这对于gulp-imagemin来说是正常的,需要这么长时间。
另一方面,我找到了另一种优化图像的解决方案,通过使用gulp-webp将它们转换为webp格式。
但在将图像转换为.webp后,你需要在html和css文件中替换所有其他扩展名,以使这种方法生效,使用gulp-replace进行替换。
我成功地这样做了
.pipe(replace(".jpg", ".webp"))
.pipe(replace(".jpeg", ".webp"))
.pipe(replace(".png", ".webp"))
.pipe(replace(".gif", ".webp"))
你可能还会喜欢这个gulp-boilerplate
英文:
Me too have this issue, but looks like that this is the normal for gulp-imagemin to take that much time.
on the other hand I found another solution for optimizing images by converting them to webp using gulp-webp.
but after converting images to .webp, you need to replace all other extenssions in both html and css files for this approach to work using gulp-replace.
I managed to do it like this
.pipe(replace(".jpg", ".webp"))
.pipe(replace(".jpeg", ".webp"))
.pipe(replace(".png", ".webp"))
.pipe(replace(".gif", ".webp"))
also you might like this gulp-boilerplate
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论