javascriptnode.jsgulpgulp-watchgulp-sass

GULP | Gulp imagemin takes too much time to convert images


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.


Solution

  • 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