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.
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