GULP | Gulp imagemin花费太多时间来转换图像

huangapple go评论73阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年1月8日 03:39:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/75043264.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定